Material design风格控件锦集

最新推荐文章于 2022-01-19 10:00:07 发布

Join下班了吗

最新推荐文章于 2022-01-19 10:00:07 发布

阅读量942

点赞数

分类专栏： android 文章标签： Material design 控件导航框架

本文链接：https://blog.csdn.net/qq_34501274/article/details/54630434

版权

android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

DEMO下载地址：http://download.csdn.net/detail/qq_34501274/9742077
先上效果图：
这里写图片描述

Material design控件介绍

TextInputLayout：文本输入布局
Snackbar
BottomNavigationView
NavigationView：导航视图
CoordinatorLayout：协作布局
AppBarLayout：程序栏布局
CollapsingToolbarLayout：折叠工具栏布局
Toolbar
TabLayout：选项卡布局
-

引用类库

 compile 'com.android.support:design:25.0.1'

TextInputLayout

<android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_zhanghao"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_email"
            android:hint="帐号"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

这里写图片描述

Snackbar

这里写图片描述

Snackbar.make(signLogin, "帐号密码都为空", Snackbar.LENGTH_SHORT).show();

这里写图片描述

  Snackbar.make(signLogin, "帐号为空", Snackbar.LENGTH_SHORT).setAction("帐号妹妹", new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(LoginActivity.this,"帐号妹妹被点击了",Toast.LENGTH_SHORT).show();
                }
            }).show();

这个Snackbar是可以设置他的背景颜色的。
有一篇博客转门讲这个花式Snackbar的：http://www.jianshu.com/p/cd1e80e64311
抽取的工具类已放到demo中了

这里奉上LoginActivity：

package zlg.wolf.zlg.activity;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import me.wangyuwei.loadingview.LoadingView;
import zlg.wolf.zlg.MainActivity;
import zlg.wolf.zlg.R;

public class LoginActivity extends AppCompatActivity {

    @BindView(R.id.text_input_zhanghao)
    TextInputLayout textInputZhanghao;
    @BindView(R.id.text_input_pwd)
    TextInputLayout textInputPwd;
    @BindView(R.id.sign_login)
    Button signLogin;
    @BindView(R.id.et_email)
    EditText etEmail;
    @BindView(R.id.et_pwd)
    EditText etPwd;

    private final static int REQUEST_SIGNUP = 0;
    @BindView(R.id.loading_view)
    LoadingView loadingView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        ButterKnife.bind(this);
    }


    @OnClick(R.id.sign_login)
    public void sign_login() {
        String editText_accounts = textInputZhanghao.getEditText().getText().toString().trim();
        String editText_pwd = textInputPwd.getEditText().getText().toString().trim();
        if (editText_accounts.isEmpty() && !editText_pwd.isEmpty()) {
            Snackbar.make(signLogin, "帐号为空", Snackbar.LENGTH_SHORT).setAction("帐号妹妹", new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(LoginActivity.this,"帐号妹妹被点击了",Toast.LENGTH_SHORT).show();
                }
            }).show();
        } else if (editText_pwd.isEmpty() && !editText_accounts.isEmpty()) {
            Snackbar.make(signLogin, "密码为空", Snackbar.LENGTH_SHORT).show();
        } else if (editText_accounts.isEmpty() || editText_pwd.isEmpty()) {
            Snackbar.make(signLogin, "帐号密码都为空", Snackbar.LENGTH_SHORT).show();

        } else {

            login();

        }

    }

    private void login() {
        loadingView.setVisibility(View.VISIBLE);
        //设置圆半径
        loadingView.setExternalRadius(50);
        loadingView.start();
        new Handler().postDelayed(
                new Runnable() {
                    public void run() {
                        Intent intent = new Intent(getApplicationContext(), MainActivity.class);
                        startActivity(intent);
                        loadingView.stop();
                    }
                }, 5000);
    }

}

BottomNavigationView

这个控件已经在之前的文章上说过了，这里就不在细说了：

http://blog.csdn.net/qq_34501274/article/details/53884932

NavigationView

效果图：
这里写图片描述

布局的引用：

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_menu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nv_header"
            app:menu="@menu/layout_left_nv" />

res\layout\nv_header.xml

<!--这是一个头布局-->
 <TextView
        android:text="UserName"
        android:id="@+id/iv"
        android:gravity="center_horizontal"
        android:textSize="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

res\menu\layout_left_nv.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
    <item
        android:id="@+id/home"
        android:icon="@mipmap/home"
        android:title="Home"/>

    <item
        android:id="@+id/favorite"
        android:icon="@mipmap/wsxx"
        android:title="Messages"/>
    <item
        android:id="@+id/wallet"
        android:icon="@mipmap/sz"
        android:title="Setting"/>
    </group>

    <item
        android:id="@+id/file"
        android:icon="@mipmap/wdyy"
        android:title="Clock"/>
    <item android:title="First Group">
        <menu>
            <item
                android:icon="@mipmap/fw_after"
                android:title="First item 1" />
            <item
                android:icon="@mipmap/fw_after"
                android:title="First item 2" />
        </menu>
    </item>
</menu>

这里奉上MainActivity：

package zlg.wolf.zlg;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.NavigationView;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.FrameLayout;

import butterknife.BindView;
import butterknife.ButterKnife;
import zlg.wolf.zlg.fragment.FirstFragment;
import zlg.wolf.zlg.fragment.Four1Fragment;

import zlg.wolf.zlg.fragment.ThreeFragment;
import zlg.wolf.zlg.fragment.TwoFragment;


public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {

        @BindView(R.id.framlayouyt)
        FrameLayout framlayouyt;
    @BindView(R.id.navigation)
    BottomNavigationView navigation;
    @BindView(R.id.navigation_menu)
    NavigationView navigationMenu;
    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;

    private android.support.v4.app.FragmentTransaction transaction;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        hideActionBar();

        ButterKnife.bind(this);
        //获得Fragment管理器
        android.support.v4.app.FragmentManager supportFragmentManager = getSupportFragmentManager();
        transaction = supportFragmentManager.beginTransaction();
        navigation.setOnNavigationItemSelectedListener(this);
        transaction.replace(R.id.framlayouyt, new FirstFragment()).commit();


    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        android.support.v4.app.FragmentManager supportFragmentManager = getSupportFragmentManager();
        android.support.v4.app.FragmentTransaction transaction = supportFragmentManager.beginTransaction();
        switch (item.getItemId()) {
            case R.id.my:
                FirstFragment fragment = new FirstFragment();
                transaction.replace(R.id.framlayouyt, fragment).commit();
                break;
            case R.id.serach:
                TwoFragment twoFragment = new TwoFragment();
                transaction.replace(R.id.framlayouyt, twoFragment).commit();
                break;
            case R.id.setting:
                ThreeFragment threeFragment = new ThreeFragment();
                transaction.replace(R.id.framlayouyt, threeFragment).commit();
                break;
            case R.id.clock:
                Four1Fragment fourFragment = new Four1Fragment();
                transaction.replace(R.id.framlayouyt, fourFragment).commit();
                break;

        }
        return true;
    }

   /**设置无title和全屏*/
    private void hideActionBar() {
        // Hide UI
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }
}

CoordinatorLayout-AppBarLayout-CollapsingToolbarLayout-TabLayout-Toolbar结合使用

效果图：

这里写图片描述

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zlg.wolf.zlg.activity.CollapsingToolbarLayoutActivity">

<!--Android使用fitsSystemWindows属性实现--状态栏【status_bar】各版本适配方案-->

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#9e8eda"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
                   //这是一个可折叠的属性配置

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_nav_bg_drawerlayout"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
               android:layout_gravity="bottom"

                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" >
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"

                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            </android.support.design.widget.TabLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>



    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"

            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

这里奉上CollapsingToolbarLayoutActivity

package zlg.wolf.zlg.activity;


import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.WindowManager;

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

import butterknife.BindView;
import butterknife.ButterKnife;
import zlg.wolf.zlg.R;
import zlg.wolf.zlg.adapter.CollapsingToolbarLayoutPagerAdapter;
import zlg.wolf.zlg.fragment.FirstFragment;
import zlg.wolf.zlg.fragment.FiveFragment;
import zlg.wolf.zlg.fragment.SixFragment;

public class CollapsingToolbarLayoutActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    @BindView(R.id.tab_layout)
    TabLayout tabLayout;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.collapsing_toolbar_layout)
    CollapsingToolbarLayout collapsingToolbarLayout;
    @BindView(R.id.view_pager)
    ViewPager viewPager;
    /**
     * 存储fragment的集合
     * */
    private List<Fragment> fragments = new ArrayList<>();
    /**
     * tab标题
     * */
    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        ButterKnife.bind(this);
         //设置全屏
        hideActionBar();
         //初始化数据
        initdata();
        //设置TabLayout标签的显示方式
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //循环注入标签
        for (String tab : titles) {
            tabLayout.addTab(tabLayout.newTab().setText(tab));
        }
         //tabLayout设置监听
        tabLayout.setOnTabSelectedListener(this);
          //适配器
        CollapsingToolbarLayoutPagerAdapter viewPagerAdapter = new CollapsingToolbarLayoutPagerAdapter(getSupportFragmentManager(), titles, fragments);
        viewPager.setAdapter(viewPagerAdapter);
        //viewPager与tablayout绑定
        tabLayout.setupWithViewPager(viewPager);

    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {

        viewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
    /**
     * 把fragment添加到集合中
     * */
    private void initdata() {
        fragments.add(new FirstFragment());
        fragments.add(new FiveFragment());
        fragments.add(new SixFragment());
    }

    private void hideActionBar() {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }
}

CoordinatorLayout

CoordinatorLayout是一个超级强大的FrameLayout。

CoordinatorLayout有两个主要用途：

作为顶级应用程序的装饰或着色布局
作为特定交互的容器，与一个或多个孩子视图交互

CoordinatorLayout作为一个父视图，它的孩子可以通过特定的行为与CoordinatorLayout别的孩子交互。
当视图类作为CoordinatorLayout的孩子时，可以定义特定的行为。

在xml文件中使用app:layout_behavior。
在view类使用@DefaultBehavior修饰符来添加注解。

AppBarLayout

AppBarLayout是一个垂直的线性布局，实现了Material Design概念的应用程序栏，支持滚动手势。

它的子视图提供所需的滚动行为：

在java文件中通过setScrollflags（int）设置
在xml布局文件中通过““

AppBarLayout经常作为CoordinatorLayout的直接子视图使用。
AppBarLayout的作用是把AppBarLayout包裹的内容都作为应用程序栏。
我们在xml文件中定义一个AppBarLayout，AppBarLayout下面有一个CollapsingToolbarLayout和Toolbar、TabLayout

app:layout_scrollFlags这个属性其实一般就只有下面4种使用情况，我们来一一讲解。

app:layout_scrollFlags=”scroll”
- 该view显示时，只有在滚动视图顶部向上滚动时，该view才会慢慢消失。
- 该view消失后，只有在滚动视图顶部向下滚动时，该view才会慢慢出现。
app:layout_scrollFlags=”scroll|enterAlways”
- 该view显示时，只要滚动视图向上滚动，该view就会慢慢消失。
- 该view消失后，只要滚动视图向下滚动，该view就会慢慢出现。
app:layout_scrollFlags=”scroll|enterAlways|enterAlwaysCollapsed”,同时该view设置了minHeight
- 该view显示时，只要滚动视图向上滚动，该view就会慢慢消失。
- 该view消失后，只要滚动视图向下滚动，该view就会慢慢出现:
- 当滚动视图不在顶部时，该view只会慢慢出现minHeight高度的内容
- 当滚动视图在顶部时，该view会慢慢出现全部的内容
app:layout_scrollFlags=”scroll|exitUntilCollapsed”,同时该view设置了minHeight
- 该view显示时，只有在滚动视图顶部向上滚动时，该view才会慢慢消失，但不会完全消失，会保留着 minHeight高度的内容依然可见。
- 该view消失后，只有在滚动视图顶部向下滚动时，该view才会慢慢出现。

注意：只有AppBarLayout第一个设置app:layout_scrollFlags属性的直接子视图可以折叠

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，它通常是作为AppBarLayout直接子视图使用。它提供的折叠工具栏更高级，还可以制造视觉差。
对于CollapsingToolbarLayout，我们通常是这样使用的，将其定义为AppBarLayout的第一个直接子视图，并且其自身定义如下：它里面有一个ImageView和一个Toolbar，形成折叠工具栏。

首先，CollapsingToolbarLayout要设置app:layout_scrollFlags，这个属性在介绍AppBarLayout的时候已经讲过了，app:contentScrim表示滚动达到一定阈值后Toolbar的背景颜色，app:expandedTitleMarginStart设置扩张时候(还没有收缩时)title向左填充的距离。
其次， ImageView的app:layout_collapseMode属性的值为parallax，设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和app:layout_collapseParallaxMultiplier属性(设置视差因子)搭配使用，其值为0~1。
最后，Toolbar的app:layout_collapseMode属性的值为pin，设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

TabLayout

Tablayout提供横向布局显示选项卡，它取代了ActionBar添加选项卡的方式。它经常与ViewPager配合使用。
Tablayout与ViewPager配合使用:

tablayout.setupWithViewPager();这种方法下面选项卡的标题由ViewPager决定
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tablayout));
这种方法下面选项卡的标题由Tablayout决定

最后补充其他小知识
这里先说一下黄油刀butterknife的使用，因为突然忘了怎么配置的了，，好尴尬！

ButterKnife

首先先去下载这个ButterKnife这个插件，在哪下载就不用说了把。
ButterKnife配置：在Project的build.gradle中配置

   classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'

然后在app的build.gradle中配置

apply plugin: 'com.neenbedankt.android-apt'
    compile 'com.jakewharton:butterknife:8.2.1'
    apt 'com.jakewharton:butterknife-compiler:8.2.1'

加载进度条

这里写图片描述
这里直接引用的一个类库

    compile 'me.wangyuwei:LoadingiVew:1.0.5'

布局使用

  <me.wangyuwei.loadingview.LoadingView
                android:visibility="gone"
                android:id="@+id/loading_view"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                lv:lv_duration="10"
                lv:lv_start_color="#688fdb"
                lv:lv_end_color="#fff"
                lv:lv_internal_radius="5dp"
                lv:lv_external_radius="92dp"
                android:layout_centerInParent="true"
               />

使用起来更简单

  /**设置半径
  */
        loadingView.setExternalRadius(50);
        /**开始
*/
        loadingView.start();

       /**结束
       */
         loadingView.stop();

设置无title、全屏

我在清单文件中配置或是代码实现都没有效果：

- this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  WindowManager.LayoutParams.FLAG_FULLSCREEN);
 -  this.requestWindowFeature(Window.FEATURE_NO_TITLE);

最后在网上找了一圈，找到一个办法可以实现无title和全屏：

private void hideActionBar() {
        // Hide UI
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

本人描述能力有限如有问题欢迎留言指出！
DEMO下载地址：http://download.csdn.net/detail/qq_34501274/9742077