Android Design AppBarLayout、NavigationView、FloatingActionButton、CollapsingToolbarLayout等控制元件的使用
阿新 • • 發佈：2019-01-10
霍霍，把剩下的幾個控制元件給大家整出來了，我是菜鳥，這些內容有很多大神早已經整出來，為什麼還要寫這個部落格呢，主要還是為了鍛鍊自己技術。在自己寫部落格的時候發現不小的問題，最大的問題就是介面醜陋。所以大家多結交結交兩個設計人員吧。
環境跟第一次搭建環境一樣。先上圖
下來分析介面，上面用了AppBarLayout。和toolbar，看過上一篇文章的都知道，這個是用的Design裡面的TabLayout。大家看右下角的這個按鈕，有沒有很懸的感覺，其實就是一個浮動按鈕FloatingActionButton。然後整個佈局是用CoordinatorLayout包裹起來的。旁邊的這個是什麼呢，NavigationView，看xml程式碼
xml程式碼<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android:id="@+id/a_design_coordinatorlayout" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <android.support.design.widget.AppBarLayout android:id="@+id/a_design_appbarlayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" > <android.support.v7.widget.Toolbar android:id="@+id/a_design_toolbar" android:layout_width="match_parent" app:layout_scrollFlags="scroll|enterAlways" android:layout_height="wrap_content"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/a_design_tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" > </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/a_design_viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior" > </android.support.v4.view.ViewPager> <android.support.design.widget.FloatingActionButton android:id="@+id/a_design_floatingactionbutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" app:borderWidth="0dp" android:layout_margin="10dp" android:src="@mipmap/ic_launcher" /> </android.support.design.widget.CoordinatorLayout>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/a_design_drawerlayout" android:layout_width="match_parent" android:layout_height="match_parent"> <!--your content--> <include layout="@layout/activity_design" /> <!--the navigation menu--> <android.support.design.widget.NavigationView android:id="@+id/a_design_navigationview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/layout_header1" app:menu="@layout/layout_menu" /> </android.support.v4.widget.DrawerLayout>
再來看看Activity怎麼寫的
package com.xiaomeng.learn;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
/**
* wei2015/9/7
*/
public class DesginActivity extends AppCompatActivity {
AppBarLayout mAppBarLayout;
Toolbar mToolbar;
TabLayout mTabLayout;
ViewPager mViewPager;
CoordinatorLayout mCoordinatorLayout;
NavigationView mNavigationView;
DrawerLayout mDrawerLayout;
FloatingActionButton mFloatingActionButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_designmian);
initParam();
initView();
initAction();
}
private void initParam() {
mAppBarLayout = (AppBarLayout) findViewById(R.id.a_design_appbarlayout);
mToolbar = (Toolbar) findViewById(R.id.a_design_toolbar);
mTabLayout = (TabLayout) findViewById(R.id.a_design_tablayout);
mViewPager = (ViewPager) findViewById(R.id.a_design_viewpager);
mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.a_design_coordinatorlayout);
mNavigationView=(NavigationView)findViewById(R.id.a_design_navigationview);
mDrawerLayout=(DrawerLayout)findViewById(R.id.a_design_drawerlayout);
mFloatingActionButton=(FloatingActionButton)findViewById(R.id.a_design_floatingactionbutton);
}
private void initView() {
initToolbar();
initTabLayout();
}
private void initAction() {
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.sub_exit:
finish();
break;
case R.id.sub_switch:
break;
case R.id.nav_blog:
startActivity(new Intent(DesginActivity.this, TextInputLayoutActivity.class));
break;
case R.id.nav_ver:
break;
case R.id.nav_about:
break;
}
menuItem.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Snackbar mSnackbar = Snackbar.make(mFloatingActionButton, "顯示內容", Snackbar
.LENGTH_LONG);
mSnackbar.setText("顯示內容1");
mSnackbar.setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
mSnackbar.dismiss();
}
});
mSnackbar.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_design, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
if (id == android.R.id.home) {
mDrawerLayout.openDrawer(GravityCompat.START);
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
protected void onPause() {
super.onPause();
}//設定Toolbar相關的內容
private void initToolbar() {
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mToolbar.setTitle("我的部落格");
mToolbar.setSubtitle("CSDN");
mToolbar.setLogo(R.mipmap.ic_launcher);
// mToolbar.setNavigationIcon(R.mipmap.count_down);
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_settings:
Toast.makeText(DesginActivity.this, "actiong_settings", Toast
.LENGTH_SHORT).show();
break;
case R.id.action_2:
Toast.makeText(DesginActivity.this, "action2", Toast.LENGTH_SHORT).show();
break;
case R.id.action_1:
Toast.makeText(DesginActivity.this, "action1", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}//設定相關TabLayout的內容
private void initTabLayout(){
List<String> tabList = new ArrayList<>();
tabList.add("計時器");
tabList.add("倒計時");
tabList.add("計數器");
mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設定tab模式，當前為系統預設模式
mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(0)));
mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(1)));
mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(2)));
List<Fragment> fragmentList = new ArrayList<>();
for (int i = 0; i < tabList.size(); i++) {
Fragment f1 = new Tab1Fragment();
Bundle bundle = new Bundle();
bundle.putString("param", "這是第"+(i+1)+"個介面");
f1.setArguments(bundle);
fragmentList.add(f1);
}
TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(DesginActivity.this,getSupportFragmentManager(), fragmentList, tabList);
mViewPager.setAdapter(fragmentAdapter);//給ViewPager設定介面卡
mTabLayout.setupWithViewPager(mViewPager);//將TabLayout和ViewPager關聯起來。
mTabLayout.setTabsFromPagerAdapter(fragmentAdapter);//給Tabs設定介面卡
for (int i=0;i<mTabLayout.getTabCount();i++)
{
TabLayout.Tab tab=mTabLayout.getTabAt(i);
tab.setCustomView(fragmentAdapter.getTabView(i));
}
}
}xml程式碼
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>Fragment程式碼
package com.xiaomeng.learn;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class Tab1Fragment extends Fragment {
private String content;
private View view;
private RecyclerView recyclerView;
private List<ModelBean> beanList;
private RecyclerAdapter adapter;
private String des[] = {"春色迷人眼", "美女動人心", "春色迷人眼", "美女動人心", "春色迷人眼"
, "美女動人心", "春色迷人眼", "美女動人心", "春色迷人眼"};
private int resId[] = {R.mipmap.fengjing, R.mipmap.girl, R.mipmap.fengjing, R.mipmap.girl,
R.mipmap.fengjing, R.mipmap.girl, R.mipmap.fengjing, R.mipmap.girl};
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
view = inflater.inflate(R.layout.fragment_tab1, container, false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
content = getArguments().getString("content");
recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
recyclerView.setItemAnimator(new DefaultItemAnimator());
initData();
}
private void initData() {
beanList = new ArrayList<>();
for (int i = 0; i < 8; i++) {
ModelBean bean = new ModelBean();
bean.setResId(resId[i]);
bean.setTitle(des[i]);
beanList.add(bean);
}
adapter = new RecyclerAdapter(getActivity(), beanList);
recyclerView.setAdapter(adapter);
adapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() {
@Override
public void onItemClick(int position, Object object) {
startActivity(new Intent(getActivity(), CollapsingToolbarActivity.class));
}
});
}
}
這兒還用到一個介面卡
package com.xiaomeng.learn;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class TabFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments;
private List<String> mTitles;
private Context mContext;
private int[] imageResId = {R.mipmap.count_timer, R.mipmap.count_down, R.mipmap.count_times};
public TabFragmentAdapter(Context context, FragmentManager fm, List<Fragment> fragments,
List<String> titles) {
super(fm);
this.mContext = context;
mFragments = fragments;
mTitles = titles;
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
public View getTabView(int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.layout_header, null);
TextView tv = (TextView) view.findViewById(R.id.l_header_tv);
ImageView iv = (ImageView) view.findViewById(R.id.l_header_iv);
tv.setText(mTitles.get(position));
iv.setImageResource(imageResId[position]);
return view;
}
}
基本都這樣，然後再來看看CollapsingToolbarLayout
這個功能也不錯，哈哈，先看xml，再看程式碼，灰常簡單
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="160dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorPrimary"
>
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@mipmap/bg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
<include layout="@layout/item_card_view" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:backgroundTintMode="multiply"
app:layout_anchor="@id/appbar"
app:borderWidth="0dp"
android:layout_margin="10dp"
app:layout_anchorGravity="bottom|end|right"></android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>程式碼：
package com.xiaomeng.learn;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class CollapsingToolbarActivity extends AppCompatActivity {
Toolbar mToolbar;
CollapsingToolbarLayout mCollapsingToolbarLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collapsing_toolbar);
mToolbar =(Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
mCollapsingToolbarLayout =(CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("I'm a Title");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_collapsing_toolbar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
原始碼部分分析瞭解：程式碼不多，3oo多行，首先繼承的是ImagView然後再來看看我們使用的public方法有哪些分別是做什麼的。有show（）、hide()、setBackgroundDrawable（）當然了，既然是繼承自Imageview，那ImagView的方法也是可以使用的了。
這兒有幾個屬性設定，當然了也可以程式碼設定了，一般就是setXXXX(),對不對。其她幾個控制元件的原始碼我也沒去看。現在覺得這控制元件使用限制還是有點多，所以就沒去看。然後再推薦一個大神的帖子。我也是看了他的東西來敲的程式碼。
下載地址：http://download.csdn.net/detail/u011051627/9112127
大神的地址：http://blog.csdn.net/feiduclear_up/article/details/46500865