Android Design Support Library 库的使用（一）

Android Design Support Library 库·的简介：
它是Google 为 Android 5.0 以上添加的一些新特性，使得Android app 开发的界面可以焕然一新！

Design Support Library	控件介绍
SnackBar	一种基于Toast 与Dialog 中间用于提示消息的
TextInputLayout	一种新的EditText(提示消息不会消失)
FloatingActionButton	悬浮按钮
TabLayout	分页式布局，结合Fragment一起使用
NavigationView	类似于侧滑菜单的导航View
AppBarLayout	新形式的AppBar
CoordinatorLayout	控件之间相互作用的布局
CollapsingToolBarLayout	一种可以收缩顶部ToolBar 的FrameLayout

Design Support Library 在 Android Studio 中可以依赖：
compile ‘com.android.support:design:24.2.1’；
(Android Studio 中依赖方法：在Android Studio 中切换到Project 视图然后点击打开 app 包下build.gradle 文件中)

下面通过代码加实现效果图逐一为大家展现效果：

SnackBar :

Snackbar.make(v,"SnackBar comes out",Snackbar.LENGTH_LONG)
                        .setAction("Action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"Toast comes out",Toast
                                .LENGTH_SHORT).show();
                            }
                        }).show();

TextInputLayout:
xml 代码：就是在TextInputLayout内部添加一个 EditText

<android.support.design.widget.TextInputLayout
        android:id="@+id/textInputLayout_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        </android.support.design.widget.TextInputLayout>

java 实现代码

textInputLayoutName = (TextInputLayout)findViewById(R.id.textInputLayout_name);

EditText editText_name=textInputLayoutName.getEditText();
        textInputLayoutName.setHint("请输入你的名字");   //给EditText设置要显示的提示消息

//接下来给 EditText 添加点击事件
editText_name.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                if(s.length()>4){
                    textInputLayoutName.setError("你的名字输入错误");
                    textInputLayoutName.setErrorEnabled(true);
                }else{
                    textInputLayoutName.setErrorEnabled(false);
                }
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

FloatingActionButton:悬浮按钮
xml 代码

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_marginTop="360dp"
        android:layout_marginLeft="240dp"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        android:src="@mipmap/ic_launcher"/>

java 实现代码

private FloatingActionButton fab;

fab = (FloatingActionButton) findViewById(R.id.fab);

//给FloatingActionButton 添加背景图片       fab.setBackgroundTintList(ColorStateList.valueOf(Color.argb(255,125,23,56)));

//给FloatingActionButton 添加点击事件，事件效果是弹出一个SnackBar        
fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v,"Here is a SnackBar",Snackbar.LENGTH_SHORT)  //给SnackBar 添加点击事件，事件效果是弹出Toast提示信息
                        .setAction("Action", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(FloatingActionActivity.this,"Hello World",Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });

TabLayout :分页式布局，一般结合ViewPager一起使用
xml 代码：将TabLayout 与 ViewPager 都放在 RelativeLayout 布局中

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.cx.designlibrarydemo.TabLayoutActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabTextColor="#C60"
        app:tabSelectedTextColor="#fff"
        app:tabMode="fixed"
        app:tabGravity="fill">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:paddingTop="45dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabLayout">
    </android.support.v4.view.ViewPager>
</RelativeLayout>/>

Java实现代码

    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<Fragment> fragments;

    viewPager = (ViewPager) findViewById(R.id.viewPager);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);

    //将Fragment 用一个 List<Fragment>集合来装 
    fragments=new ArrayList<>();
    fragments.add(new TabFragment_1());
    fragments.add(new TabFragment_2());
    fragments.add(new TabFragment_3());

    //ViewPager设置 Adapter用来适配Fragment（因为ViewPager中装入3个Fragment，我们有3个Tab页，每个Tab页一一对应Fragment）

    final FragmentPagerAdapter adapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public android.support.v4.app.Fragment getItem(int position) {
                return fragments.get(position);
            }

            @Override
            public int getCount() {
                return fragments.size();
            }
        };

viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);  //将ViewPager 与TabLayout 关联
        //设置3个 Tab页，并且给每个Tab页设上标题 ，你也可以自定义标题，比如加入图片之类的
        tabLayout.getTabAt(0).setText("Tab1");
        tabLayout.getTabAt(1).setText("Tab2");
        tabLayout.getTabAt(2).setText("Tab3");

其中的Fragment的代码，这里只列举一个

public class TabFragment_1 extends android.support.v4.app.Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View viewTabFragment1=inflater.inflate(R.layout.fragment_tab1,container,false);
       return viewTabFragment1;
    }
}

NavigationView ：类似与SlidingMenu（侧滑菜单那种显示效果—第三方控件）
这里结合着DrawerLayout （抽屉控件一起使用）
xml代码：

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <!--这是主内容布局-->
    <include layout="@layout/content_layout"/>

    <!--这是侧滑菜单的布局-->
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:layout_gravity="left"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/draw_menu"
        >

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

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

重点注意这两句代码：
app:headerLayout=”@layout/nav_header”
app:menu=”@menu/draw_menu”

nav_header.xml 里面存放着NavigationView 的头部，它是layout形式的xml文件
draw_menu.xml 里面存放则NavigationView 的菜单，它是menu形式的xml文件

nav_header.xml 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="162dp"
    android:background="?attr/colorPrimaryDark"
    android:paddingTop="30dp"
    android:paddingLeft="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="center|left"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="cxYu1997"/>
</LinearLayout>

draw_menu.xml 代码：这是menu 菜单文件，在menu文件夹新建的menu文件

<?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/nav_home"
              android:icon="@mipmap/ic_launcher"
              android:title="Home"/>

        <item android:id="@+id/nav_messages"
            android:icon="@mipmap/ic_launcher"
            android:title="Messages"/>

        <item android:id="@+id/nav_friends"
            android:icon="@mipmap/ic_launcher"
            android:title="Friends"/>

        <item android:id="@+id/nav_discussion"
            android:icon="@mipmap/ic_launcher"
            android:title="Discussion"/>
    </group>

    <item android:title="Sub items">
        <menu>
            <item android:icon="@mipmap/ic_launcher"
                android:title="Sub item1"/>

            <item android:icon="@mipmap/ic_launcher"
                android:title="Sub item2"/>
        </menu>
    </item>
</menu>

Java实现代码：

public class NavigationViewActivity extends AppCompatActivity {
    //下面完善了
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view);
    }
}

下面是对NavigationView 中的Menu菜单文件添加点击事件

private NavigationView navigationView;
navigationView =(NavigationView)findViewById(R.id.navigationView);

 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_home:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_messages:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_friends:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_discussion:
                        Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.sub_item1:
                        Toast.makeText(NavigationViewActivity.this,"sub_item1 界面",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.sub_item2:
                        Toast.makeText(NavigationViewActivity.this,"sub_item2 界面",Toast.LENGTH_SHORT).show();
                        break;
                }
                item.setChecked(true);
                drawerLayout.closeDrawers(); //关闭抽屉
                return true;
            }
        });



    //创建菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //创建Menu 菜单
        getMenuInflater().inflate(R.menu.draw_menu,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id=item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }
        if (id == android.R.id.home) {
            drawerLayout.openDrawer(GravityCompat.START);  //打开抽屉
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

由于是抽屉所以要在 Toolbar 上添加一个抽屉按钮，用来更加方便的打开左侧的NavigationView 视图，所以这里初始化Toolbar 一下；

 private void initToolbar() {
        //初始化ToolBar
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        toolbar.setTitle("ToolBar的菜单栏"); //设置标题
        toolbar.setSubtitle("CSDN");   //设置子标题
        toolbar.setLogo(R.mipmap.ic_launcher); //设置Logo图标
        toolbar.setNavigationIcon(R.mipmap.ic_launcher); //设置抽屉的图片
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setOnMenuItemClickListener(this);//这是给toolbar 上的其他Menu设置按钮监听事件，并不是NavigationView 的Menu上的点击事件，还请不要搞混
    }

//这是Toolbar 上的menu菜单点击事件，跟NavigationView上的Menu的菜单点击事件展现效果不一样，虽然共用一份Menu文件
@Override
public boolean onMenuItemClick(MenuItem item) {

        //对ToolBar上的菜单进行点击事件
        switch (item.getItemId()){
            case R.id.nav_home:
                Toast.makeText(NavigationViewActivity.this,"Nav_Home 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_messages:
                Toast.makeText(NavigationViewActivity.this,"Nav_Messages 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_friends:
                Toast.makeText(NavigationViewActivity.this,"Nav_Friends 界面",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_discussion:
                Toast.makeText(NavigationViewActivity.this,"Nav_Discussion 界面",Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

注意：该代码中的getMenuInflater().inflate(R.menu.draw_menu,menu);
上面的R.menu.draw_menu 文件为NavigationView 和 Toolbar 两者共用的Menu菜单文件，读者可以自定义两份，没必要共用一份Menu文件！

后面的AppBarLayout和 CoordinatorLayout以及CollapsingToolBarLayout 3大控件在下一篇博客中详细介绍！（由于篇幅问题）

Android Design Support Library 库的使用（一）

猜你喜欢