Andorid Support Design库新控件（下）

最新推荐文章于 2021-08-02 11:28:02 发布

心忘则忘

最新推荐文章于 2021-08-02 11:28:02 发布

阅读量507

点赞数

分类专栏： Android ACM

本文链接：https://blog.csdn.net/nkdwslsd/article/details/52915487

版权

Android 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

ACM

2 篇文章 0 订阅

订阅专栏

5，android.support.design.widget.TabLayout 选项卡
通过选项卡的方式切换View并不是MD中才有的新概念，它们和顶层导航模式或者组织app中不同分组内容
（比如，不同风格的音乐）是同一个概念。 Design library的TabLayout 既实现了固定的选项卡（View的宽度平均分配），
也实现了可滚动的选项卡（View宽度不固定同时可以横向滚动）。如果你使用ViewPager在 tab之间横向切换，
你可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。

它可以使tab的选中事件能更新ViewPager,同时 ViewPager的页面改变能更新tab的选中状态。

<LinearLayout 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:orientation="vertical"
    tools:context="com.jht.administrator.day1024.TabLayoutActivity">
    <android.support.design.widget.TabLayout
        android:id="@+id/id_tablayout"
        android:layout_height="60dp"
        android:layout_width="match_parent"
        android:background="#ffff00"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabIndicatorHeight="4dp"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="#000000">

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/id_vp"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_below="@+id/id_tablayout">

    </android.support.v4.view.ViewPager>
</LinearLayout>

public class TabLayoutActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mVp;
    private List<Fragment>fragments;
    private List<String>titles;
    private MyPagerAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        mTabLayout = (TabLayout) findViewById(R.id.id_tablayout);
        mVp = (ViewPager) findViewById(R.id.id_vp);
        initData();
        setData();
    }

    private void initData(){
        fragments = new ArrayList<>();
        titles = new ArrayList<>();
        for (int i = 0; i < 8; i++) {
            titles.add("第"+(i+1)+"项");
            MyFragment fragment = new MyFragment();
            Bundle bundle = new Bundle();
            bundle.putString("key","第"+(i+1)+"页内容");
            fragment.setArguments(bundle);

            fragments.add(fragment);
        }
        adapter = new MyPagerAdapter(getSupportFragmentManager(),fragments,titles);

    }

    private void setData(){
        mVp.setAdapter(adapter);
        //设置tablayout和viewpager一起联动，相关
        mTabLayout.setupWithViewPager(mVp);

        //设置tablayout的滑动模式
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    }
}

public class MyPagerAdapter extends FragmentPagerAdapter{

    private List<Fragment>fragments;
    private List<String>titles;
    public MyPagerAdapter(FragmentManager fm,List<Fragment>fragments,List<String>titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }

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

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

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

6.android.support.design.widget.CoordinatorLayout 超级FrameLayout
手势,及滚动布局，MD的手势有很多组成部分，包括touch ripples和meaningful transitions。
Design library引入了CoordinatorLayout，一个从另一层面去控制子view之间触摸事件的布局，
Design library中的很多控件都利用了它。一个很好的例子就是当你将FloatingActionButton作
为一个子View添加进 CoordinatorLayout并且将CoordinatorLayout传递给 Snackbar.make()，
在3.0及其以上的设备上，Snackbar不会显示在悬浮按钮的上面，而是FloatingActionButton
利用CoordinatorLayout提供的回调方法，在Snackbar以动画效果进入的时候自动向上移动让出位置，
并且在Snackbar动画地消失的时候回到原来的位置，不需要额外的代码。

CoordinatorLayout的另一个用例是ActionBar与滚动技巧。你可能已经在自己的布局中使用了Toolbar
它允许你更加自由的自定义其外观与布局的其余部分融为一体。Design library把这种设计带到了更高的水平，
使用AppBarLayout可以让你的Toolbar与其他View（比如TabLayout的选项卡）能响应被标记了
ScrollingViewBehavior的View的滚动事件。
注意项：
当用户滚动RecyclerView，AppBarLayout可以这样响应滚动事件：
根据子view的滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。
Flag包括：
scroll：所有想滚动出屏幕的View都需要设置这个flag，没有设置这个flag的View将被固定在屏幕顶部。
enterAlways：这个flag让任意向下的滚动都会导致该View变为可见，启用快速“返回模式”。
enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed：this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

特别注意：所有使用scroll flag的View都必须定义在没有使用scroll flag的View前面，这样才能确保所有的View从顶部退出，留下固定的元素。
PS一句：CoordinatorLayout还提供了layout_anchor和layout_anchorGravity属性一起配合使用，可以用于放置floating view，比如FloatingActionButton与其他View的相对位置。相见Demo中演示。

android.support.design.widget.AppBarLayout MD风格的滑动Layout
这个没啥解释的，就是一个ViewGroup，配合ToolBar与CollapsingToolbarLayout等使用。就是一个纯容器类。
无特殊注意项。

android.support.design.widget.CollapsingToolbarLayout 可折叠MD风格ToolbarLayout
可伸缩折叠的Toolbar （Collapsing Toolbar），直接添加Toolbar到AppBarLayout可以让你使用enterAlwaysCollapsed和
exitUntilCollapsedscroll标志，但是无法控制不同元素如何响应collapsing的细节。这里使用了CollapsingToolbarLayout
的app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部。还可以做到更好的效果，
当你让CollapsingToolbarLayout和Toolbar在一起使用的时候，title 会在展开的时候自动变得大些，而在折叠的时候让字
体过渡到默认值。必须注意，在这种情况下你必须在CollapsingToolbarLayout上调用 setTitle()，而不是在Toolbar上。
除了固定住View，你还可以使用 app:layout_collapseMode=”parallax”
（以及使用 app:layout_collapseParallaxMultiplier=”0.7”来设置视差因子）来实现视差滚动效果
（比如 CollapsingToolbarLayout里面的一个ImageView），这中情况和CollapsingToolbarLayout的
app:contentScrim=”?attr/colorPrimary”属性一起配合更完美。
有一件事情必须注意，那就是CoordinatorLayout并不知道FloatingActionButton或者AppBarLayout的内部工作原理，
它只是以Coordinator.Behavior的形式提供了额外的API，该API可以使子View更好的控制触摸事件与手势以及声明
它们之间的依赖，并通过onDependentViewChanged()接收回调。
可以使用CoordinatorLayout.DefaultBehavior(你的View.Behavior.class)注解或者在布局中使用
app:layout_behavior=”com.example.app.你的View$Behavior”属性来定义view的默认行为。
framework让任意View和CoordinatorLayout结合在一起成为了可能。

nestedscrollview:

    <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">

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

public class ToolbarBasicActivity extends AppCompatActivity {

    private Toolbar toolbar;
    Context context;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        requestWindowFeature(Window.FEATURE_NO_TITLE);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_toolbar_basic);
        context = this;
        toolbar = (Toolbar) findViewById(R.id.id_toolbar);

        //设置导航栏的图标
        toolbar.setNavigationIcon(R.mipmap.menu);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.i("tag","导航栏被电击了");
            }
        });

        //设置app 的logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        //设置标题
        toolbar.setTitle("Title");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setSubtitle("SubTitle");
        toolbar.setSubtitleTextColor(Color.GRAY);
        //在toolbar当中加载菜单内容
        toolbar.inflateMenu(R.menu.base_toolbar_menu);

        //设置菜单项对应的点击事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_setting:
                        Toast.makeText(context,"您点击了‘设置’选项",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_search:
                        Toast.makeText(context,"您点击了‘搜索’选项",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notify:
                        Toast.makeText(context,"您点击了‘通知’选项",Toast.LENGTH_SHORT).show();
                        break;
                }

                return false;
            }
        });
    }
}

 <android.support.v4.widget.NestedScrollView
        android:id="@+id/id_nested_sv"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

public class NestedActivity extends AppCompatActivity {

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

<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/id_appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="80dp">
        <android.support.v7.widget.Toolbar
            app:title="1614班级的同学们都是好孩子"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/id_toolbar"
            app:layout_scrollFlags = "scroll|enterAlways"></android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/id_nested_sv"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher"
                android:scaleType="centerCrop"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

public class ComprehensiveActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_comprehensive);
        toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        //设置在actionbar的位置上显示toolbar
//        setSupportActionBar(toolbar);
    }