Android Design Support 使用實例

題圖 www.gratisography.com

開發(fā)環(huán)境 Android Studio 2.2，創(chuàng)建一個新的工程，默認(rèn)的工程已經(jīng)加入了com.android.support:appcompat
需要引入design的庫com.android.support:design:25.0.0,File->Project Structure，選擇Dependencies
添加design的庫

工程源碼

NavigationView

使用design的庫可以很容易的實現(xiàn)導(dǎo)航抽屜的UI，修改res/layout/activity_main.xml文件,加入NavigationView組件

<?xml version="1.0" encoding="utf-8"?>
<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/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <android.support.design.widget.NavigationView
      android:id="@+id/design_navigation_view"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:layout_gravity="start"
      app:headerLayout="@layout/drawer_layout_header"
      app:menu="@menu/drawer_menu">

  </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

在DrawerLayout中添加了一個NavigationView的組件，在組件NavigationView中注意兩個屬性
app:headerLayout(頭部區(qū)域)和app:menu(渲染導(dǎo)航的菜單)，這個兩個屬性也可以通過代碼控制
navigationView.inflateHeaderView(int resId),navigationView.inflateMenu(int resId)
添加drawer_layout_header.xml到res/layout中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="150dp"
  android:background="?attr/colorPrimaryDark"
  android:padding="16dp"
  android:theme="@style/ThemeOverlay.AppCompat.Dark"
  android:gravity="bottom">
  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/drawer_header_text"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</LinearLayout>

還要添加菜單布局res/menu/drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_attachment"
            android:checked="true"
            android:icon="@drawable/ic_attachment"
            android:title="@string/nav_item_attachment" />
        <item
            android:id="@+id/navigation_item_images"
            android:icon="@drawable/ic_image"
            android:title="@string/nav_item_images" />
        <item
            android:id="@+id/navigation_item_location"
            android:icon="@drawable/ic_place"
            android:title="@string/nav_item_location" />
    </group>

    <item android:title="@string/nav_sub_menu">
        <menu>
            <item
                android:icon="@drawable/ic_emoticon"
                android:title="@string/nav_sub_menu_item01" />
            <item
                android:icon="@drawable/ic_emoticon"
                android:title="@string/nav_sub_menu_item02" />
        </menu>
    </item>

</menu>

運行的效果圖如下：

drawer.png

private DrawerLayout mDrawerLayout;
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);

創(chuàng)建菜單

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_menu,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    switch (id){
        case R.id.action_settings:
            return true;
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);//打開抽屜導(dǎo)航
            return true;
    }
    return super.onOptionsItemSelected(item);
}

NavigationView中的菜單事件的處理，通過setNavigationItemSelectedListener方法處理

NavigationView navigationView = (NavigationView)findViewById(R.id.design_navigation_view);//初始化
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//設(shè)置監(jiān)聽
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        item.setChecked(true);//菜單選中
        mDrawerLayout.closeDrawers();//關(guān)閉導(dǎo)航抽屜
        Toast.makeText(MainActivity.this,item.getTitle(),Toast.LENGTH_SHORT).show();//顯示菜單的標(biāo)題

        return true;
    }
});

Floating Action Button (FAB)

為了添加FAB，修改一下res/layout/activity_main.xml的布局，添加下面的布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/fab"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_done"/>
</RelativeLayout>

在布局的右下角添加了一個FAB，屬性src設(shè)置圖像，也可以通過代碼setImageDrawable()方法設(shè)置圖像
在代碼中還可以添加點擊事件

Snackbar

Snackbar是和Toast功能相似的一個組件，給用戶提示信息，可以替代Toast的功能，Snackbar顯示在
布局的底部，Snackbar比Toast的功能更強大，可以和Snackbar進(jìn)行交互，我們通過FAB的點擊事件來顯示
Snackbar

mFab = (FloatingActionButton)findViewById(R.id.fab);
mFab.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v) {
        Snackbar.make(mDrawerLayout,"Snack bar",Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Snack bar action",Toast.LENGTH_SHORT).show();
            }
        }).show();
    }
});

運行的效果圖，可以看到Snackbar覆蓋了FloatingActionButton，后續(xù)會修復(fù)這個問題

snackbar.png

TabLayout

修改res/layout/activity_main.xml,在RelativeLayout中加入TabLayout,配合ViewPager Fragment
來實現(xiàn)對應(yīng)的功能

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">
  <android.support.design.widget.TabLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/tablayout"
      android:background="?attr/colorPrimary"
      android:theme="@style/ThemeOverlay.AppCompat.Dark"
      app:tabGravity="fill">
  </android.support.design.widget.TabLayout>
  <android.support.v4.view.ViewPager
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>

在java中添加一些內(nèi)部類

public static class DemoFragment extends Fragment{
  private static final String TAB_POS = "tab_pos";

  public DemoFragment() {
      super();
  }

  public static DemoFragment newInstance(int tabPosition){
      DemoFragment fragment = new DemoFragment();
      Bundle args = new Bundle();
      args.putInt(TAB_POS,tabPosition);
      fragment.setArguments(args);
      return fragment;
  }

  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      Bundle args = getArguments();
      int tabPos = args.getInt(TAB_POS);
      TextView text = new TextView(getActivity());
      text.setText("Text in tab "+tabPos);
      text.setGravity(Gravity.CENTER);
      return text;
  }
}

static  class DemoPageAdapter extends FragmentStatePagerAdapter{
    public DemoPageAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return DemoFragment.newInstance(position);
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "Tab "+position;
    }
}

在onCreate()中做處理

DemoPageAdapter adapter = new DemoPageAdapter(getSupportFragmentManager());
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout)findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);

![Uploading tablayout_723271.png . . .]

CoordinatorLayout

修改一下res/layout/activity_main.xml的布局，加入CoordinatorLayout組件,完整的布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/contentPanel">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tablayout"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark"
                app:tabGravity="fill">
            </android.support.design.widget.TabLayout>
            <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:id="@+id/viewpager"
                android:layout_weight="1"></android.support.v4.view.ViewPager>
        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:src="@drawable/ic_done"/>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/design_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_layout_header"
        app:menu="@menu/drawer_menu">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

去除了RelativeLayout,FloatingActionButton的布局也有變化，添加了android:layout_gravity="bottom|right"的屬性
FloatingActionButton的邏輯代碼也做了相應(yīng)的修改make()方法的第一個參數(shù)為CoordinatorLayout的view實例，這樣Snackbar
就不會被覆蓋了

mFab.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v) {
        Snackbar.make(findViewById(R.id.contentPanel),"Snack bar",Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"Snack bar action",Toast.LENGTH_SHORT).show();
            }
        }).show();
    }
});

corr.png

RecyclerView CardView

compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'

嘗試加入RecyclerView,創(chuàng)建res/layout/fragment_list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler_view">
</android.support.v7.widget.RecyclerView>

添加res/layout/list_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="56dp"
    android:padding="16dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/list_item"/>
</LinearLayout>

創(chuàng)建RecyclerAdapter.java

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder>{

  private List<String> mItems;
  public RecyclerAdapter(List<String> items){
      mItems = items;
  }

  @Override
  public void onBindViewHolder(ViewHolder holder, int position) {
      String item = mItems.get(position);
      holder.textView.setText(item);
  }

  @Override
  public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      View  v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_row,parent,false);
      return new ViewHolder(v);
  }

  @Override
  public int getItemCount() {
      return mItems.size();
  }

  public class ViewHolder extends RecyclerView.ViewHolder{
      private TextView textView;
      public ViewHolder(View itemView) {
          super(itemView);
          textView = (TextView)itemView.findViewById(R.id.list_item);
      }
  }
}

修改DemoFragment.onCreateView()方法

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    Bundle args = getArguments();
    int tabPos = args.getInt(TAB_POS);/*
    TextView text = new TextView(getActivity());
    text.setText("Text in tab "+tabPos);
    text.setGravity(Gravity.CENTER);*/
    ArrayList<String> items = new ArrayList<>();
    for(int i = 0;i<50;i++){
        items.add("Tab "+tabPos+" item "+i);
    }
    View v = inflater.inflate(R.layout.fragment_list_view,container,false);
    RecyclerView recyclerView = (RecyclerView)v.findViewById(R.id.recycler_view);
    recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
    recyclerView.setAdapter(new RecyclerAdapter(items));
    return v;
}

recycler.png

后續(xù)會加入 AppBarLayout CollapsingToolbarLayout TextInputLayout

未完待續(xù)。。。