Android Design Support 使用实例

Android Design Support 使用实例

题图 www.gratisography.com

开发环境 Android Studio 2.2，创建一个新的工程，默认的工程已经加入了com.android.support:appcompat
需要引入design的库com.android.support:design:25.0.0,File->Project Structure，选择Dependencies
添加design的库

工程源码

NavigationView

使用design的库可以很容易的实现导航抽屉的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(头部区域)和app:menu(渲染导航的菜单)，这个两个属性也可以通过代码控制
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
处理导航的打开事件，在主Activity中声明初始化DrawerLayout，导航抽屉的打开，启动应用之后
从屏幕左侧向右滑动即可打开，也可以通过界面的组件打开

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

创建菜单

@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);//打开抽屉导航
            return true;
    }
    return super.onOptionsItemSelected(item);
}

NavigationView中的菜单事件的处理，通过setNavigationItemSelectedListener方法处理

NavigationView navigationView = (NavigationView)findViewById(R.id.design_navigation_view);//初始化
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//设置监听
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        item.setChecked(true);//菜单选中
        mDrawerLayout.closeDrawers();//关闭导航抽屉
        Toast.makeText(MainActivity.this,item.getTitle(),Toast.LENGTH_SHORT).show();//显示菜单的标题

        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设置图像，也可以通过代码setImageDrawable()方法设置图像
在代码中还可以添加点击事件

Snackbar

Snackbar是和Toast功能相似的一个组件，给用户提示信息，可以替代Toast的功能，Snackbar显示在
布局的底部，Snackbar比Toast的功能更强大，可以和Snackbar进行交互，我们通过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，后续会修复这个问题

snackbar.png

TabLayout

修改res/layout/activity_main.xml,在RelativeLayout中加入TabLayout,配合ViewPager Fragment
来实现对应的功能

<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中添加一些内部类

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的逻辑代码也做了相应的修改make()方法的第一个参数为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,创建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>

创建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

后续会加入 AppBarLayout CollapsingToolbarLayout TextInputLayout

未完待续。。。