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
未完待续。。。
