Android-Material学习（可以兼容5.0以下的版本）

最新推荐文章于 2024-04-06 11:53:38 发布

原创最新推荐文章于 2024-04-06 11:53:38 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

58 篇文章

订阅专栏

这篇博客介绍了如何在Android中使用CoordinatorLayout，并解决在兼容5.0以下版本时遇到的问题，如Snackbar与FloatingActionButton的交互问题。通过调整targetSdkVersion和compileSdkVersion到23来修复这个问题。此外，还提到了AppBarLayout和CollapsingToolbarLayout的使用细节，如颜色设定、折叠模式和标题间距等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先导入依赖：
compile'com.android.support:design:24.2.0'
2.介绍控件
注意xml需要引入：

   xmlns:app="http://schemas.android.com/apk/res-auto"

使用这个控件的时候发现，snack出来后，FloatingActionButton不恢复以前的位置，发现原因是因为使用Api24编译，将targetSdkVersion和compileSdkVersion降为23就好了，估计是官方的问题

FloatingActionButton控件
<android.support.design.widget.FloatingActionButton android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:backgroundTint="#ff0000" app:fabSize="normal" app:elevation="5dp" 设置阴影 android:clickable="true" 设置控件是被点击的 app:rippleColor="#000000" 点击后的颜色改变 />
TextInputLayout控件
`

 textInputLayout = (TextInputLayout)findViewById(R.id.til);
        floatingActionButton = (FloatingActionButton)findViewById(R.id.btn);
        textInputLayout.setHint("我收");
        //获取包装的EditText
        EditText editText = textInputLayout.getEditText();
        //设置输入监听
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //charsequence是原来的字符串长度
                //i是光标所处的位置
                //i1是删除字符的个数
                //i2是增加字符的个数
                System.out.println(i+" "+" "+i1+" "+i2+"--");
                //charSequence表示用户输入的字符串
                if (charSequence.length() > 5) {
                    textInputLayout.setError("用户名不正确");
                    //设置错误是否可见
                    textInputLayout.setErrorEnabled(true);
                } else {
                    textInputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

Snackbar控件

 floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Snackbar snackbar = Snackbar.make(floatingActionButton,"你得安静",Snackbar.LENGTH_LONG);//参数1被点击的按钮，参数2提示的信息，参数3 显示的时间长短
                snackbar.show();
                //设置snack出现后的点击效果
                snackbar.setAction("知道了", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        snackbar.dismiss();
                    }
                });
            }
        });

TabLayout的使用：一般搭配上ViewPager
需要注意的问题是
给Viewpager做Fragment的适配器需要继承FragmentStatePagerAdapter(适用于较多数据)，而且要多实现一个方法getPageTitle()给TabLayout使用

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@android:color/holo_green_dark"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabTextColor="#fff"
        app:tabMode="scrollable"
        app:tabIndicatorColor="#123"
        app:tabIndicatorHeight="10dp"
        android:id="@+id/tab_layout">

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

CoordinatorLayout是协调子View的

需要注意的：

AppBarLayout 中的
app:theme=”@style/ThemeOverlay.AppCompat.Dark.ActionBar”用于指定颜色（这里是白色），还指定开始ActionBar的宽高

CollapsingToolbarLayout中的
app:contentScrim=”#77db93”用于指定滑动返回的背景颜色
app:expandedTitleMarginStart=”50dp”用于指定开始文字与 ActionBar的间距
app:layout_collapseMode=”pin”设置折叠的模式

colooapsingtoolbarlayout = (CollapsingToolbarLayout)findViewById(R.id.colooapsingtoolbarlayout) ;
        colooapsingtoolbarlayout.setTitle("计机14401");
        colooapsingtoolbarlayout.setExpandedTitleColor(Color.GREEN);//设置还没收缩时状态下字体颜色
        colooapsingtoolbarlayout.setCollapsedTitleTextColor(Color.WHITE);//设置收缩后Toolbar上字体的颜色

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/colooapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#77db93"
            app:expandedTitleMarginStart="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/mipd"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/tools_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="20dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/Base.Theme.AppCompat.Light.DarkActionBar">

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

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

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

    <!--对scroll的支持不是很好，改用下面的 -->

    <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="wrap_content"
            android:orientation="vertical">

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

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

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

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

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

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

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

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

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

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

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

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

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="5dp"
        android:src="@android:drawable/ic_dialog_email" />


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