Android Design AppBarLayout、NavigationView、FloatingActionButton、CollapsingToolbarLayout等控件的使用

霍霍，把剩下的几个控件给大家整出来了，我是菜鸟，这些内容有很多大神早已经整出来，为什么还要写这个博客呢，主要还是为了锻炼自己技术。在自己写博客的时候发现不小的问题，最大的问题就是界面丑陋。所以大家多结交结交两个设计人员吧。环境跟第一次搭建环境一样。先上图

下来分析界面，上面用了AppBarLayout。和toolbar，看过上一篇文章的都知道，这个是用的Design里面的TabLayout。大家看右下角的这个按钮，有没有很悬的感觉，其实就是一个浮动按钮FloatingActionButton。然后整个布局是用CoordinatorLayout包裹起来的。旁边的这个是什么呢，NavigationView，看xml代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/a_design_coordinatorlayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/a_design_appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/a_design_toolbar"
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
        android:layout_height="wrap_content">

        </android.support.v7.widget.Toolbar>

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

        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/a_design_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/a_design_floatingactionbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:borderWidth="0dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher" />

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

xml代码

<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/a_design_drawerlayout"
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent">

    <!--your content-->

    <include layout="@layout/activity_design" />

    <!--the navigation menu-->
    <android.support.design.widget.NavigationView
        android:id="@+id/a_design_navigationview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_header1"
        app:menu="@layout/layout_menu" />


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

再来看看Activity怎么写的

package com.xiaomeng.learn;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

/**
 * wei2015/9/7
 */
public class DesginActivity extends AppCompatActivity {

    AppBarLayout mAppBarLayout;
    Toolbar mToolbar;
    TabLayout mTabLayout;
    ViewPager mViewPager;
    CoordinatorLayout mCoordinatorLayout;
    NavigationView mNavigationView;
    DrawerLayout mDrawerLayout;
    FloatingActionButton mFloatingActionButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_designmian);
        initParam();
        initView();
        initAction();
    }

    private void initParam() {
        mAppBarLayout = (AppBarLayout) findViewById(R.id.a_design_appbarlayout);
        mToolbar = (Toolbar) findViewById(R.id.a_design_toolbar);
        mTabLayout = (TabLayout) findViewById(R.id.a_design_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.a_design_viewpager);
        mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.a_design_coordinatorlayout);
        mNavigationView=(NavigationView)findViewById(R.id.a_design_navigationview);
        mDrawerLayout=(DrawerLayout)findViewById(R.id.a_design_drawerlayout);
        mFloatingActionButton=(FloatingActionButton)findViewById(R.id.a_design_floatingactionbutton);
    }

    private void initView() {
        initToolbar();
    initTabLayout();
    }

    private void initAction() {
    mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {


        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            switch (menuItem.getItemId()) {
                case R.id.sub_exit:
                    finish();
                    break;
                case R.id.sub_switch:
                    break;
                case R.id.nav_blog:
                    startActivity(new Intent(DesginActivity.this, TextInputLayoutActivity.class));
                    break;
                case R.id.nav_ver:
                    break;
                case R.id.nav_about:
                    break;
            }
            menuItem.setChecked(true);
           mDrawerLayout.closeDrawers();
            return true;
        }
    });
        mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                final Snackbar mSnackbar = Snackbar.make(mFloatingActionButton, "显示内容", Snackbar
                        .LENGTH_LONG);
                mSnackbar.setText("显示内容1");
                mSnackbar.setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mSnackbar.dismiss();
                    }
                });
                mSnackbar.show();
            }
        });
    }


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

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

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        if (id == android.R.id.home) {
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPause() {
        super.onPause();

    }

//设置Toolbar相关的内容
    private void initToolbar() {
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        mToolbar.setTitle("我的博客");
        mToolbar.setSubtitle("CSDN");
        mToolbar.setLogo(R.mipmap.ic_launcher);
//        mToolbar.setNavigationIcon(R.mipmap.count_down);
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_settings:
                        Toast.makeText(DesginActivity.this, "actiong_settings", Toast
                                .LENGTH_SHORT).show();

                        break;
                    case R.id.action_2:
                        Toast.makeText(DesginActivity.this, "action2", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_1:
                        Toast.makeText(DesginActivity.this, "action1", Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });
    }

//设置相关TabLayout的内容
    private void initTabLayout(){
        List<String> tabList = new ArrayList<>();
        tabList.add("计时器");
        tabList.add("倒计时");
        tabList.add("计数器");
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(0)));
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(1)));
        mTabLayout.addTab(mTabLayout.newTab().setText(tabList.get(2)));

        List<Fragment> fragmentList = new ArrayList<>();
        for (int i = 0; i < tabList.size(); i++) {
            Fragment f1 = new Tab1Fragment();
            Bundle bundle = new Bundle();
            bundle.putString("param", "这是第"+(i+1)+"个界面");
            f1.setArguments(bundle);
            fragmentList.add(f1);
        }

        TabFragmentAdapter fragmentAdapter = new TabFragmentAdapter(DesginActivity.this,getSupportFragmentManager(), fragmentList, tabList);
        mViewPager.setAdapter(fragmentAdapter);//给ViewPager设置适配器
        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(fragmentAdapter);//给Tabs设置适配器
        for (int i=0;i<mTabLayout.getTabCount();i++)
        {
            TabLayout.Tab tab=mTabLayout.getTabAt(i);
            tab.setCustomView(fragmentAdapter.getTabView(i));
        }
    }
}

这儿有点不同的就是TabLayout用了RecyclerView。来看看TabLayout用的到fragment怎么咋写的吧

xml代码

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

Fragment代码

package com.xiaomeng.learn;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



import java.util.ArrayList;
import java.util.List;



public class Tab1Fragment extends Fragment {

    private String content;
    private View view;
    private RecyclerView recyclerView;

    private List<ModelBean> beanList;
    private RecyclerAdapter adapter;

    private String des[] = {"春色迷人眼", "美女动人心", "春色迷人眼", "美女动人心", "春色迷人眼"
            , "美女动人心", "春色迷人眼", "美女动人心", "春色迷人眼"};

    private int resId[] = {R.mipmap.fengjing, R.mipmap.girl, R.mipmap.fengjing, R.mipmap.girl,
            R.mipmap.fengjing, R.mipmap.girl, R.mipmap.fengjing, R.mipmap.girl};


    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_tab1, container, false);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        content = getArguments().getString("content");
        recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        initData();
    }


    private void initData() {
        beanList = new ArrayList<>();
        for (int i = 0; i < 8; i++) {
            ModelBean bean = new ModelBean();
            bean.setResId(resId[i]);
            bean.setTitle(des[i]);
            beanList.add(bean);
        }
        adapter = new RecyclerAdapter(getActivity(), beanList);
        recyclerView.setAdapter(adapter);
        adapter.setOnItemClickListener(new RecyclerAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(int position, Object object) {
                startActivity(new Intent(getActivity(), CollapsingToolbarActivity.class));
            }
        });
    }
}

这儿还用到一个适配器

package com.xiaomeng.learn;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


import java.util.List;


public class TabFragmentAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;
    private List<String> mTitles;
    private Context mContext;
    private int[] imageResId = {R.mipmap.count_timer, R.mipmap.count_down, R.mipmap.count_times};

    public TabFragmentAdapter(Context context, FragmentManager fm, List<Fragment> fragments,
                              List<String> titles) {
        super(fm);
        this.mContext = context;
        mFragments = fragments;
        mTitles = titles;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

    public View getTabView(int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.layout_header, null);
        TextView tv = (TextView) view.findViewById(R.id.l_header_tv);
        ImageView iv = (ImageView) view.findViewById(R.id.l_header_iv);
        tv.setText(mTitles.get(position));
        iv.setImageResource(imageResId[position]);
        return view;
    }
}

基本都这样，然后再来看看CollapsingToolbarLayout

这个功能也不错，哈哈，先看xml，再看代码，灰常简单

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                 xmlns:app="http://schemas.android.com/apk/res-auto"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="160dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"

            >

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>


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


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

            <include layout="@layout/item_card_view" />

        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:backgroundTintMode="multiply"
        app:layout_anchor="@id/appbar"
        app:borderWidth="0dp"
        android:layout_margin="10dp"
        app:layout_anchorGravity="bottom|end|right"></android.support.design.widget.FloatingActionButton>

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

代码：

package com.xiaomeng.learn;

import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class CollapsingToolbarActivity extends AppCompatActivity {

    Toolbar mToolbar;
    CollapsingToolbarLayout mCollapsingToolbarLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_toolbar);
        mToolbar =(Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);

        mCollapsingToolbarLayout =(CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
        mCollapsingToolbarLayout.setTitle("I'm a Title");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_collapsing_toolbar, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

基本大概使用的情况就是这样的了，待会会把代码的下载地址发出来，然后看了Design也有不少日子了，为什么这儿没重要讲里面的方法，是因为限制挺多的，说白了就是不怎么特别广泛的用，但是CollapsingToolbarLayout，FloatingActionButton、TextInputLayout这些限制比较少的还不错。然后继续来看看源码吧，首先最简单的FloatingActionButton吧。

源码部分分析了解：代码不多，3oo多行，首先继承的是ImagView然后再来看看我们使用的public方法有哪些分别是做什么的。有show（）、hide()、setBackgroundDrawable（）当然了，既然是继承自Imageview，那ImagView的方法也是可以使用的了。

这儿有几个属性设置，当然了也可以代码设置了，一般就是setXXXX(),对不对。其她几个控件的源码我也没去看。现在觉得这控件使用限制还是有点多，所以就没去看。然后再推荐一个大神的帖子。我也是看了他的东西来敲的代码。

下载地址：http://download.csdn.net/detail/u011051627/9112127

大神的地址：http://blog.csdn.net/feiduclear_up/article/details/46500865