MaterialDesign组件

喜欢ヅ旅行 2024-04-07 11:21 13阅读 0赞

## SwipeRefreshLayout ##

使用前要添加依赖  
`implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"`

### 功能 ###

下拉刷新  
![在这里插入图片描述][f55922f7c049495d9116accb0e1ecb86.png]  
![在这里插入图片描述][1949d45df1a24b0aa63acfe34ac9e795.png]  
![在这里插入图片描述][917d4ea0ff2843e9800fd78e9196a382.png]

### 代码 ###

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {
        
    
        private TextView tv_simple;
        private SwipeRefreshLayout srl_simple; // 声明一个下拉刷新布局对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            tv_simple = findViewById(R.id.tv_simple);
            // 从布局文件中获取名叫srl_simple的下拉刷新布局
            srl_simple = findViewById(R.id.srl_simple);
            // 给srl_simple设置下拉刷新监听器
            srl_simple.setOnRefreshListener(this);
            // 设置下拉刷新布局的进度圆圈颜色
            srl_simple.setColorSchemeResources(
                    R.color.red, R.color.orange, R.color.green, R.color.blue);
        }
    
        private Handler mHandler = new Handler(); // 声明一个处理器对象
        // 定义一个刷新任务
        private Runnable mRefresh = new Runnable() {
        
            @Override
            public void run() {
        
                tv_simple.setText("刷新完成");
                // 结束下拉刷新布局的刷新动作
                srl_simple.setRefreshing(false);
            }
        };
    
        /**
         * 一旦在下拉刷新布局内部往下拉动页面，就触发下拉监听器的onRefresh方法
         */
        @Override
        public void onRefresh() {
        
            tv_simple.setText("正在刷新");
            // 延迟若干秒后启动刷新任务
            mHandler.postDelayed(mRefresh, 2000);
        }
    }

`activity_main.xml`

## FloatingActionButton ##

### 功能 ###

悬浮按钮，当作正常的button进行使用

`xml`

## Snackbar ##

### 功能 ###

底部提示框  
![在这里插入图片描述][440e09159c064f4186161992005c6925.png]

Snackbar snackbar=Snackbar.make(view,"这是改变颜色的snackbar",Snackbar.LENGTH_INDEFINITE);
    //设置snackbar的背景颜色
                    snackbar.getView().setBackgroundColor(ContextCompat.getColor(MainActivity.this,R.color.teal_700));
    snackbar.setActionTextColor(Color.RED);
    snackbar.setAction("确定", new View.OnClickListener() {
        
        @Override
        public void onClick(View view) {
        
            Toast.makeText(MainActivity.this, "你点了确定", Toast.LENGTH_SHORT).show();
        }
    }).show();
    //snackbar添加的回调方法
    snackbar.addCallback(new Snackbar.Callback(){
        
        @Override
        public void onDismissed(Snackbar transientBottomBar, int event) {
        
            super.onDismissed(transientBottomBar, event);
            Log.e(TAG, "Sanck消失的时候触发的重写方法 ");
        }
    
        @Override
        public void onShown(Snackbar sb) {
        
            super.onShown(sb);
            Log.e(TAG, "Sanck展示的时候触发的重写方法");
        }
    });

## TabLayout ##

### 功能 ###

底部导航  
![在这里插入图片描述][b3d11d828de344fd846dc7a4e8c309d2.png]

`MainActivity.java`

package com.example.tablayout2;
    
    import androidx.annotation.NonNull;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.fragment.app.Fragment;
    import androidx.viewpager2.widget.ViewPager2;
    
    import android.os.Bundle;
    import android.util.Log;
    
    import com.google.android.material.tabs.TabLayout;
    import com.google.android.material.tabs.TabLayoutMediator;
    
    import java.util.ArrayList;
    
    public class MainActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      String TAG="moli";
    //把fragment1和fragment2放入集合中，利用适配器的构造方法来传递到构造方法里
            TabLayout tabLayout=findViewById(R.id.tablayout);
            ViewPager2 viewPager2=findViewById(R.id.viewpager2);
            ArrayList<Fragment> fragments=new ArrayList<Fragment>();
            OneFragment oneFragment=new OneFragment();
            TwoFragment twoFragment=new TwoFragment();
            fragments.add(oneFragment);
            fragments.add(twoFragment);
            //适配器的对象，第一个参数是装载在哪个activity
            TabLayoutAdapter tabLayoutAdapter=new TabLayoutAdapter(this,fragments);
            //设置ViewPager2的滑动方向
            viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
            //为viewPager设置适配器
            viewPager2.setAdapter(tabLayoutAdapter);
            //创建fragment的标题列表
            ArrayList<String> FragmentTitle=new ArrayList<String>();
            FragmentTitle.add("娱乐");
            FragmentTitle.add("新闻");
            //tablayout与viewpager2关联起来
    new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
        
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        
            //设置tablayout的标题,根据postion的位置来对应fragment
            tab.setText(FragmentTitle.get(position));
        }
    }).attach();
    //给viewpager2注册回调
            viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        
                    super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                    Log.e(TAG, "onPageScrolled: ");
                }
    
                @Override
                public void onPageSelected(int position) {
        
                    super.onPageSelected(position);
                    Log.e(TAG, "onPageSelected: " );
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
        
                    super.onPageScrollStateChanged(state);
                    Log.e(TAG, "onPageScrollStateChanged: ");
                }
            });
        }
    }

`TabLayoutAdapter.java`

package com.example.tablayout2;
    
    import androidx.annotation.NonNull;
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentActivity;
    import androidx.viewpager2.adapter.FragmentStateAdapter;
    
    import java.util.ArrayList;
    
    public class TabLayoutAdapter extends FragmentStateAdapter {
        
        //使用list装载Fragment
        ArrayList<Fragment> fragments;
        //适配器的构造方法，传入fragments,使得适配器与MainActivity之间fragment数据连接
        public TabLayoutAdapter(@NonNull FragmentActivity fragmentActivity,ArrayList<Fragment> fragments) {
        
            super(fragmentActivity);
            this.fragments=fragments;
        }
    //用position fragment与Adapter绑定在一起
        @NonNull
        @Override
        public Fragment createFragment(int position) {
        
            return fragments.get(position);
        }
    //返回item的数量
        @Override
        public int getItemCount() {
        
            return fragments.size();
        }
    }

## CardView ##

### 功能 ###

卡片按钮  
![在这里插入图片描述][6cd4e8ce22164f48b54abc6a7643b008.png]

### 代码 ###

`activity_main.xml`

`MainActivity.java`

package com.example.cardview;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.cardview.widget.CardView;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            CardView cardView=findViewById(R.id.cardView);
            cardView.setOnClickListener(new View.OnClickListener() {
        
                @Override
                public void onClick(View view) {
        
                    Toast.makeText(MainActivity.this, "你按了CardView", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

## Scrolling ##

### 借鉴教程 ###

[AppbarLayout的简单用法][AppbarLayout]

### 功能 ###

可折叠的appbar  
![在这里插入图片描述][c4aa16219a9140e3b21b180fdc673643.png]  
![在这里插入图片描述][4b2c251275ab47dd992124f401fc034b.png]

### 代码 ###

AppBarLayout是支持响应滚动手势的app bar布局，可以当做垂直布局的LinearLayout来使用。AppbarLayout是在LinearLayout上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。  
CollapsingToolbarLayout 则是专门用来实现子布局内不同元素响应滚动细节的布局  
NestedScrollView 即 支持嵌套滑动的 ScrollView。  
![在这里插入图片描述][23636a4383814367a715a1e0c53b1be8.png]

`activity_main.xml`

<?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.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:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:layout_height="192dp"
            android:layout_width="match_parent">
    
            
            
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:toolbarId="@+id/toolbar"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll"
                app:layout_scrollInterpolator="@android:anim/decelerate_interpolator"
                android:background="@drawable/sky"
    
                app:contentScrim="?attr/colorPrimary">
    
                <ImageView
                    android:id="@+id/app_bar_image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    android:src="@drawable/sky"
                    android:scaleType="centerCrop" />
    
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    >
    
                </androidx.appcompat.widget.Toolbar>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>
    
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
           >
    
            <include layout="@layout/textcontext">
    
        </include>
        </androidx.core.widget.NestedScrollView>
    
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/flb"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@android:drawable/ic_input_add"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:contentDescription="button" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

## TextInputLayout ##

### 功能 ###

Material的输入框  
![在这里插入图片描述][008feda122094cb1af25d0987d5c25e0.png]

### 代码 ###

`activity_main.xml`

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
    
        <com.google.android.material.textfield.TextInputLayout
    
            android:id="@+id/InputLayoutName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="80dp"
            app:counterEnabled="true"
            app:counterMaxLength="3"
            app:counterOverflowTextAppearance="@style/MyOverflowText"
            app:errorEnabled="true"
            app:errorTextAppearance="@style/MyErrorText"
            app:hintTextAppearance="@style/MyHintText"
    
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <com.google.android.material.textfield.TextInputEditText
    
                android:id="@+id/inputEditName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入账户"
                android:theme="@style/Theme.AppCompat.Light" />
        </com.google.android.material.textfield.TextInputLayout>
    
        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/inputLayoutPassword"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/colorPrimary"
            android:layout_width="406dp"
            android:layout_height="71dp"
            android:layout_marginStart="4dp"
            android:layout_marginTop="236dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="57dp"
                android:hint="请输入密码"
                android:inputType="textPassword"
                android:theme="@style/Theme.TextInputLayout" />
        </com.google.android.material.textfield.TextInputLayout>
    
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="168dp"
            android:layout_marginTop="416dp"
            android:text="登录"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

`MainActivity.java`

package com.example.textinputlayout;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.text.Editable;
    import android.text.TextWatcher;
    import android.util.Log;
    
    import com.google.android.material.textfield.TextInputEditText;
    import com.google.android.material.textfield.TextInputLayout;
    
    public class MainActivity extends AppCompatActivity {
        
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            String TAG="moli";
            TextInputLayout inputLayoutName=findViewById(R.id.InputLayoutName);
            TextInputEditText inputEditName=findViewById(R.id.inputEditName);
            TextInputLayout inputLayoutPassword=findViewById(R.id.inputLayoutPassword);
            //设置文本监听
    inputEditName.addTextChangedListener(new TextWatcher() {
        
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        
            Log.e(TAG, "beforeTextChanged: " );
        }
    
        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        
            Log.e(TAG, "onTextChanged: ");
        }
    
        @Override
        public void afterTextChanged(Editable editable) {
        
            if (inputLayoutName.getEditText().getText().length()>inputLayoutName.getCounterMaxLength()){
        
    inputLayoutName.setError("输入内容超过上限");
            }else {
        
                inputLayoutName.setError(null);
            }
    
        }
    });
        }
    }

## SearchView ##

### 功能 ###

搜索框  
![在这里插入图片描述][3a9dddaf0d074e6f8a6126b63956380f.png]  
![在这里插入图片描述][c1c5b33a628947ed8f3340a6069d2789.png]  
![在这里插入图片描述][59c31df0be55443984da96c45c593005.png]

### 代码 ###

`menu`

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        
        <item
            android:id="@+id/serach_menu"
            android:icon="@drawable/search"
            android:title="搜索"
            app:actionViewClass="androidx.appcompat.widget.SearchView"
            app:showAsAction="ifRoom" />
    
    
    </menu>

`MainActivity.java`

package com.example.searchview;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.appcompat.widget.SearchView;
    import androidx.constraintlayout.widget.ConstraintLayout;
    import androidx.core.content.ContextCompat;
    
    import android.os.Bundle;
    import android.text.TextUtils;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.view.inputmethod.EditorInfo;
    import android.widget.EditText;
    import android.widget.TextView;
    
    import com.google.android.material.snackbar.Snackbar;
    
    public class MainActivity extends AppCompatActivity {
        
        ConstraintLayout layout;
        TextView textView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
             layout = findViewById(R.id.layout);
    textView=findViewById(R.id.textView);
    
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
        
            //引用清单文件
            getMenuInflater().inflate(R.menu.searchmenu, menu);
            MenuItem search = menu.findItem(R.id.serach_menu);
            SearchView searchView = (SearchView) search.getActionView();
            //搜索图标是否显示在搜索框内
            searchView.setIconifiedByDefault(true);
            //设置搜索框展开时是否显示提交按钮
            searchView.setSubmitButtonEnabled(true);
            //让键盘的回车设置为搜索
    searchView.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
    //搜索框默认是否展开.true时不展开，false是展开
    searchView.setIconified(true);
    //搜索框获取焦点
    searchView.setFocusable(true);
    //设置在Touch模式下不支持焦点，也能够获得焦点
           searchView.requestFocusFromTouch();
           //输入提示信息
    searchView.setQueryHint("请输入搜索内容");
    //获取输入框
            EditText editText=searchView.findViewById(com.google.android.material.R.id.search_src_text);
            //设置输入框的提示文字颜色
    editText.setHintTextColor(ContextCompat.getColor(this,R.color.white));
    //设置输入框的文字颜色
    editText.setTextColor(ContextCompat.getColor(this,R.color.white));
    //设置搜索框的文本监听
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        
        @Override
        public boolean onQueryTextSubmit(String query) {
        
            //搜索内容提交时的操作
            Snackbar.make(layout,"搜索的内容是"+query,Snackbar.LENGTH_SHORT).show();
            //伪搜索
            textView.setVisibility(View.VISIBLE);
            return false;
        }
    //当搜索内容改变时触发该方法
        @Override
        public boolean onQueryTextChange(String newText) {
        
            if (TextUtils.isEmpty(newText)){
        
    textView.setVisibility(View.INVISIBLE);
            }
            return false;
        }
    });
            return super.onCreateOptionsMenu(menu);
        }
    }

## DrawerLayout ##

### 功能 ###

抽屉视图  
![在这里插入图片描述][83649514e1ce4e4a908e05ced46696e5.png]  
![在这里插入图片描述][d61fac46404441e684b885ad83311c29.png]  
![在这里插入图片描述][e4b46ba3614243b29d8e5d7b2202df50.png]

## 代码 ##

[github][]

[f55922f7c049495d9116accb0e1ecb86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e309fb25b5164cdcbc2b816835e5c9f2.png
[1949d45df1a24b0aa63acfe34ac9e795.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d9c8ca3e749d4ea28ec17e5e83c310e7.png
[917d4ea0ff2843e9800fd78e9196a382.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5b192e5a8def45629e57164aa5069a92.png
[440e09159c064f4186161992005c6925.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/56d090ca21734e45bc0e544367296f3e.png
[b3d11d828de344fd846dc7a4e8c309d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9021ecfa3e584a2bb4fae811e5204637.png
[6cd4e8ce22164f48b54abc6a7643b008.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3bc4d708435b4b7080847409943a1d9a.png
[AppbarLayout]: https://www.jianshu.com/p/bbc703a0015e
[c4aa16219a9140e3b21b180fdc673643.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0755b72ab890474a941d9a811b33136c.png
[4b2c251275ab47dd992124f401fc034b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b4a2b94db354463db331d632d76cc85e.png
[23636a4383814367a715a1e0c53b1be8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8010bd5f4fa549349b4389c65e5a9974.png
[008feda122094cb1af25d0987d5c25e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/29ba082dd5af4ca0af0235261c04051b.png
[3a9dddaf0d074e6f8a6126b63956380f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/da161faa34c544418eca7b10188d2c3a.png
[c1c5b33a628947ed8f3340a6069d2789.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ee34fdb70c5f42ac89fea4cb3dfdc377.png
[59c31df0be55443984da96c45c593005.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1f9f37a7f8b9469fa56c878225728322.png
[83649514e1ce4e4a908e05ced46696e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4183a2b862ae4f8b915291df190f9b6d.png
[d61fac46404441e684b885ad83311c29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4ad8545a6ddd41549b49991678295532.png
[e4b46ba3614243b29d8e5d7b2202df50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/159547b1405643e382e4fb05a4afeea6.png
[github]: https://github.com/1120026847/MaterialDesign