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

未完待续。。。

最后编辑于：2017.12.04 06:54:57

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

Android Design Support 使用实例