Days40 Material Design（二）

最新推荐文章于 2023-07-21 15:33:41 发布

转载最新推荐文章于 2023-07-21 15:33:41 发布 · 570 阅读

Android小菜专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Android开发中常用的UI控件，包括TabLayout、SwipeRefreshLayout、NestedScrollView及CoordinatorLayout等高级布局组件的使用方法与特性。通过实例展示了如何设置TabLayout与ViewPager的绑定、SwipeRefreshLayout的下拉刷新功能、NestedScrollView的滚动效果以及CoordinatorLayout与其他控件的协调使用。

（六）TabLayout
extends HorizontalScrollView
这里写图片描述
功能：将ViewPager的标题设置给TabLayout，并将ViewPager与TabLayout绑定
Android中TabLayout切换选项背景和修改字体大小
http://blog.youkuaiyun.com/ming2316780/article/details/51763864
布局文件：

<android.support.design.widget.TabLayout
        android:id="@+id/tlShow"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/vpShow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

代码：

public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tlShow = null;
    private ViewPager vpShow = null;
    private List<String> strList = null;
    private List<Fragment> fmList = null;
    private FragmentPagerAdapter adapter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);

        initView();

        setData();

//        源码中通过mPagerAdapter.getPageTitle(i)获得某一页的标题并设置给对应的标签
//        这一句代码，就实现了TabLayout和ViewPager的绑定
        tlShow.setupWithViewPager(vpShow);
        tlShow.setTabMode(TabLayout.MODE_SCROLLABLE);//可滚动tabs，显示一部分tabs
//        tlShow.setTabMode(TabLayout.MODE_FIXED);//固定tabs，并同时显示所有的tabs
    }

    private void setData() {
        strList = new ArrayList<>();
        fmList = new ArrayList<>();
        for (int i=0;i<5;i++){
            strList.add("title"+i);

            fmList.add(new MyFragment());
        }

        /**
         * ViewPager需要配合TabLayout时，要通过mPagerAdapter.getPageTitle(i)方法获得某一页的标题
         * @Override
         * public CharSequence getPageTitle(int position) {
         * return strList.get(position);
         * }
         */
        adapter = new MyFragmentAdapter(getSupportFragmentManager(),fmList,strList);
        vpShow.setAdapter(adapter);
    }

    private void initView() {
        tlShow = (TabLayout) findViewById(R.id.tlShow);
        vpShow = (ViewPager) findViewById(R.id.vpShow);
    }
}

（七）SwipeRefreshLayout 与ListView等一起使用可实现下拉刷新；对比PullToRefresh
extends ViewGroup
这里写图片描述
布局文件：

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/srlShow"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ListView
            android:id="@+id/lvShow"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></ListView>
    </android.support.v4.widget.SwipeRefreshLayout>

代码：

public class SwipeRefreshActivity extends AppCompatActivity {
    private SwipeRefreshLayout srlShow = null;
    private ListView lvShow = null;
    private TextView txtNoData = null;

    private int index = 1;
    private List<String> strList = new ArrayList<>();
    private String url = "http://m2.qiushibaike.com/article/list/latest?page=";

    private ArrayAdapter<String> adapter;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    adapter = new ArrayAdapter<String>(SwipeRefreshActivity.this,R.layout.simple_text_item,strList);
                    lvShow.setAdapter(adapter);

//                    设置刷新结束
                    srlShow.setRefreshing(false);
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_swipe_refresh);

        initView();

        setData();

//        设置刷新时动画的颜色
        srlShow.setColorSchemeColors(Color.RED,Color.GREEN,Color.BLUE);

        setListener();
    }

    private void setListener() {
        lvShow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(SwipeRefreshActivity.this,"position"+i,Toast.LENGTH_LONG).show();
            }
        });

//        设置下拉的监听
        srlShow.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                setData();
            }
        });
    }

    private void setData() {
        new Thread(){
            @Override
            public void run() {
                super.run();
                String json = OkHttpUtils.getJsonStringByUrl(url + index++);
                if(json != null){
                    try {
                        JSONObject obj = new JSONObject(json);
                        JSONArray jarr = obj.getJSONArray("items");
                        for (int i = 0;i<jarr.length();i++){
                            strList.add(jarr.getJSONObject(i).optString("content"));
                        }

                        handler.sendEmptyMessage(0);
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }

    private void initView() {
        srlShow = (SwipeRefreshLayout) findViewById(R.id.srlShow);
        lvShow = (ListView) findViewById(R.id.lvShow);
        txtNoData = (TextView) findViewById(R.id.txtNoData);
        lvShow.setEmptyView(txtNoData);
    }
}

（八）NestedScrollView
like ScrollView
extends FrameLayout
（九）CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
a、CoordinatorLayout
extends ViewGroup
作用就是协调其中的子View的显示效果和动画行为。
属性：
layout_anchor 锚点，可以将View固定到指定控件上
layout_anchorGravity 锚点控件的方向，上下左右
layout_behavior 行为，比如滑动NestedScrollView后ToolBar也同时收起。取值：app:layout_behavior=”@string/appbar_scrolling_view_behavior”

b、AppBarLayout
extends LinearLayout
它是一个垂直的LinearLayout，是一个为更好的兼容google的Material设计风格的AppBar控件。比如实现App Bar随RecyclerView一起滚出屏幕外，或者向下滚动时，又显示在屏幕顶部。
说明：
1、其本身是一个Layout容器，所以单独使用没有任何效果
2、对其中包含的子控件，需要指定子空间希望的滚动行为。通过setScrollFlags(int)或者app:layout_scrollFlags
app:layout_scrollFlags, 设置滚动标签,
取值有五个：
scroll：CollapsingToolbarLayout可以滚动
enterAlwaysCollapsed：当ScrollView滚动到顶时，头部显示
exitUntilCollapsed，头部折叠到最小高度（Toolbar的高度）时，不再折叠
snap，滑动过程中，如果停止滑动，头部就近折叠
enterAlways:只要底部ScrollView向下滚动，则显示头部
3、其非常依赖CoordinatorLayout控件，通常是作为CoordinatorLayout空间的直接子控件使用。如果不是包含在CoordinatorLayout中，AppBarLayout的很多特性就失效。CoordinatorLayout必须是AppBarLayout的直接父容器。

c、CollapsingToolbarLayout
extends FrameLayout
简介：是一个ToolBar的容器，协助完成ToolBar的收缩和展开的功能
属性：
1.app:expandedTitleGravity,展开之后标题的位置
2.app:collapsedTitleGravity,折叠之后标题的内容
3.app:contentScrim, appBar折叠后的颜色或图片
4.app:title,AppBar的标题，会覆盖toolbar中的title
5.layout_collapseMode (折叠模式) - 有两个值:
pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用
6.app:layout_collapseParallaxMultiplier=”0.6”（视觉差，0-1，数值越大，视觉差越大）
效果图：
这里写图片描述

布局文件：

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.sign.days39md01.coordinator.CoordinatorLayoutActivity">

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

<android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="left"
            app:collapsedTitleGravity="left|bottom"
            app:contentScrim="#00ccff"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed|snap"
            app:title="title">
            <ImageView
                android:src="@drawable/b"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                app:title="toolbar"
                android:layout_height="?android:attr/actionBarSize"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!--layout_behavior 行为，比如滑动NestedScrollView后ToolBar也同时收起。就是一种behavior。
    取值：app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/text"/>
    </android.support.v4.widget.NestedScrollView>


    <!--
    app:elevation，控件悬浮的高度
    app:layout_anchorGravity,控件显示的位置
    app:layout_anchor：悬浮参考位置
    app:fabSize：设置控件的大小
    -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="5dp"
        app:fabSize="mini"
        app:layout_anchorGravity="bottom|right"
        app:layout_anchor="@id/app_bar"
        android:src="@android:drawable/ic_input_add" />
</android.support.design.widget.CoordinatorLayout>