Material Design入門

時間  2019-11-13
標籤 material design 入門 简体版
原文   原文鏈接

本文主要包括如下內容

  1. ToolBar的使用
  2. RecyclerView的定義與使用

ToolBar

風格 (style)
界面 (layout)
程序 (java) html

首先自定義一個theme,並將AppTheme的parent改爲咱們自定義的theme

(style.xml)
<resources>

    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="android:windowBackground">@color/window_background</item>
    </style>

    <style name="AppTheme" parent="BaseAppTheme" />

</resources>

其中，colorPrimaryDark是狀態欄底色
App bar 底色
navigationBarColor 導航欄底色
主視窗底色：windowBackground java

在這裏定義整個界面的底色

在layout中定義toolbar

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        >
    </android.support.v7.widget.Toolbar>

在java代碼中

有如下方法 android

setNavigationIcon:
即設定 up button 的圖標，由於 Material 的介面，在 Toolbar這裏的 up button樣式也就有別於過去的 ActionBar 哦。git

setLogo
APP 的圖標。 github

setTitle
主標題。 markdown

setSubtitle
副標題。 架構

setOnMenuItemClickListener
設定菜單各按鈕的動做。 app

效果以下

這裏寫圖片描述

實現

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=(Toolbar)findViewById(R.id.toolbar);
        mRecyclerView= (RecyclerView) findViewById(R.id.recyclerView);

        // App Logo
        toolbar.setLogo(R.drawable.ic_launcher);
// Title
        toolbar.setTitle("My Title2");
// Sub Title
        toolbar.setSubtitle("Sub title");

        setSupportActionBar(toolbar);

// Navigation Icon 要設定在 setSupoortActionBar 纔有做用
// 否則會出現 back button
        toolbar.setNavigationIcon(R.drawable.ab_android);


        toolbar.setOnMenuItemClickListener(onMenuItemClick);



    }

在menu中定義菜單

<menu 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"
      tools:context=".MainActivity">
      <item android:id="@+id/action_edit"
          android:title="edit"
          android:orderInCategory="80"
          android:icon="@drawable/ab_edit"
          app:showAsAction="ifRoom" />

      <item android:id="@+id/action_share"
          android:title="share"
          android:orderInCategory="90"
          android:icon="@drawable/ab_share"
          app:showAsAction="ifRoom" />

      <item android:id="@+id/action_settings"
          android:title="setting"
          android:orderInCategory="100"
          app:showAsAction="never"/>
</menu>

設置圖標與圖標響應事件

  1. 而且在onCreateOptionsMenu方法中綁定，
  2. 而後用OnMenuItemClickListener 設置監聽
  3. toolbar.setOnMenuItemClickListener(onMenuItemClick)，將監聽賦給toolbar
private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_edit:
                    msg += "Click edit";
                    break;
                case R.id.action_share:
                    msg += "Click share";
                    break;
                case R.id.action_settings:
                    msg += "Click setting";
                    break;
            }

            if(!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu_main,menu);
        return super.onCreateOptionsMenu(menu);
    }

參考連接：

android：ToolBar詳解（手把手教程） - 泡在網上的日子dom

RecycleView的使用

RecyclerView出現已經有一段時間了，相信你們確定不陌生了，你們能夠經過導入support-v7對其進行使用。
據官方的介紹，該控件用於在有限的窗口中展現大量數據集，其實這樣功能的控件咱們並不陌生，例如：ListView、GridView。ide

那麼有了ListView、GridView爲何還須要RecyclerView這樣的控件呢？總體上看RecyclerView架構，提供了一種插拔式的體驗，高度的解耦，異常的靈活，經過設置它提供的不一樣LayoutManager，ItemDecoration , ItemAnimator實現使人瞠目的效果。

  • 你想要控制其顯示的方式，請經過佈局管理器LayoutManager
  • 你想要控制Item間的間隔（可繪製），請經過ItemDecoration
  • 你想要控制Item增刪的動畫，請經過ItemAnimator
  • 你想要控制點擊、長按事件，請本身寫

基本使用

mRecyclerView = findView(R.id.id_recyclerview);
//設置佈局管理器
mRecyclerView.setLayoutManager(layout);
//設置adapter
mRecyclerView.setAdapter(adapter)
//設置Item增長、移除動畫
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
//添加分割線
mRecyclerView.addItemDecoration(new DividerItemDecoration(
                getActivity(), DividerItemDecoration.HORIZONTAL_LIST));

簡單實現

package com.zj.material2recy;

import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    private List<String> mDatas;
    private HomeAdapter mAdapter;
    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        setTitle("KSFHFSSF");

        initData();
        recyclerView= (RecyclerView) findViewById(R.id.id_recyclerview);
        recyclerView.setHasFixedSize(true);


        //recyclerView.setLayoutManager(new LinearLayoutManager(this));
        //recyclerView.setLayoutManager(new GridLayoutManager(MainActivity.this,3));
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));
        mAdapter = new HomeAdapter();
        recyclerView.setAdapter(mAdapter);

        recyclerView.setItemAnimator(new DefaultItemAnimator());





    }

    public void add(View view)
    {
       mAdapter.add(view);
    }

    public void remove(View view)
    {
        mAdapter.remove(view);
    }



   List<Integer> mHeights;
    protected void initData()
    {
        mDatas = new ArrayList<String>();
        for (int i = 'A'; i < 'z'; i++)
        {
            mDatas.add("" + (char) i);
        }

        mHeights = new ArrayList<Integer>();
        for (int i = 0; i < mDatas.size(); i++)
        {
            mHeights.add( (int) (100 + Math.random() * 300));
        }
    }

    class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.MyViewHolder>
    {

        public void add(View view)
        {
            mDatas.add(2,"insert");
            notifyItemInserted(2);
        }

        public void remove(View view)
        {
            mDatas.remove(8);
            notifyItemRemoved(8);
        }


        @Override
        public HomeAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            MyViewHolder holder=new MyViewHolder(LayoutInflater.from(MainActivity.this).inflate(R.layout.item_main,parent,false));
            return holder;
        }

        @Override
        public void onBindViewHolder(HomeAdapter.MyViewHolder holder, int position) {
            int temp= (int) (Math.random()*5+10);
            //holder.tv.setHeight(temp);

            ViewGroup.LayoutParams lp =  holder.tv.getLayoutParams();
            lp.height = mHeights.get(position);
            holder.tv.setLayoutParams(lp);


            holder.tv.setText(mDatas.get(position));

        }

        @Override
        public int getItemCount() {
            return mDatas.size();
        }

        class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener
        {

            TextView tv;

            public MyViewHolder(View view)
            {
                super(view);
                tv = (TextView) view.findViewById(R.id.id_num);
                view.setOnClickListener(this);
            }

            @Override
            public void onClick(View view) {

                String text=tv.getText().toString();
                int positon=recyclerView.getChildAdapterPosition(view);
                Snackbar.make(view, text+positon, Snackbar.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

佈局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.v7.widget.Toolbar  android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:title="afbd" android:background="?attr/colorPrimary" >
    </android.support.v7.widget.Toolbar>
    <LinearLayout  android:layout_below="@id/toolbar" android:id="@+id/bt_ctr" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">
    <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="add" android:onClick="add"/>
        <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="remove" android:onClick="remove"/>
    </LinearLayout>

    <android.support.v7.widget.RecyclerView  android:id="@+id/id_recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/bt_ctr" android:scrollbars="none" />

</RelativeLayout>

recycleView的item佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="60dp" android:clickable="true" android:gravity="center_vertical" android:orientation="vertical" >

    <TextView  android:id="@+id/id_num" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="abfd" android:gravity="center" android:textColor="@android:color/black" android:textSize="18sp" />
</RelativeLayout>

效果以下：實現了瀑布流，添加，刪除時的動畫

這裏寫圖片描述

分割線的實現詳見參考連接:

Android RecyclerView 使用徹底解析 體驗藝術般的控件 - Hongyang - 博客頻道 - CSDN.NET

layoutManger的用法

RecyclerView.LayoutManager吧，這是一個抽象類，好在系統提供了3個實現類,分別實現listView,grideView,瀑布流：

  • LinearLayoutManager 現行管理器，支持橫向、縱向。
  • GridLayoutManager 網格佈局管理器
  • StaggeredGridLayoutManager 瀑布就式佈局管理器 
//mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));

ItemAnimator的用法

ItemAnimator也是一個抽象類，好在系統爲咱們提供了一種默認的實現類，期待系統多
添加些默認的實現。

藉助默認的實現，當Item添加和移除的時候，添加動畫效果很簡單:

// 設置item動畫
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
  • 注意，這裏更新數據集不是用adapter.notifyDataSetChanged()而是
    notifyItemInserted(position)與notifyItemRemoved(position)
    不然沒有動畫效果。
    上述爲adapter中添加了兩個方法：
public void addData(int position) {
        mDatas.add(position, "Insert One");
        notifyItemInserted(position);
    }

    public void removeData(int position) {
            mDatas.remove(position);
        notifyItemRemoved(position);
    }

點擊事件監聽實現

class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

            TextView tv;

            public MyViewHolder(View view)
            {
                super(view);
                tv = (TextView) view.findViewById(R.id.id_num);
                view.setOnClickListener(this);
            }

            @Override
            public void onClick(View view) {

                String text=tv.getText().toString();
                int positon=recyclerView.getChildAdapterPosition(view);
                Snackbar.make(view, text+positon, Snackbar.LENGTH_SHORT).show();
            }
        }
    }

首先setOnclickListener，由MyViewHolder 接收並處理

完成：參考連接以下

Android RecyclerView 使用徹底解析 體驗藝術般的控件 - Hongyang - 博客頻道 - CSDN.NET

動畫效果源碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程