Android之MaterialDesign應用技術


  PS:縱觀現在大大小小軟件的界面都變的比較漂亮,還有一些系統了,比如小米的MIUI,華為的EMUI等,雖然底層都是安卓,但他們的界面多多少少都會不同,谷歌對這個UI也是非常重視的,MaterialDesign就是今天的主角,首先在看這個的同時,要搞清楚什么是Material Design,百度百科解釋,中文名:材料設計語言,是由Google推出的全新的設計語言,谷歌表示,這種設計語言旨在為手機、平板電腦、台式機和“其他平台”提供更一致、更廣泛的“外觀和感覺”。design,中文是設計之意,即“設想和計划,設想是目的,計划是過程安排”,通常指有目標和計划的創作行為、活動。在這個競爭激烈的數字化信息時代,企業建立自己的網站已經刻不容緩。無論大、中、小型企業,都決不能被時代所淘汰,所以,建設網站是企業把握時代脈搏,衡量企業是否跟上時代的標准。精明的經營者懂得並擅於用最先進的媒體--互聯網,樹立企業形象,宣傳企業產品。企業建立網站,是企業在網絡時代的企業舞台中展現自身實力和尋求發展的重要途徑。

  網上沖浪,這是一個很有意思的事情,可以看到最新的工程師的動態,最新的技術和該技術的廣泛性,網上有很多人寫過這個design文章,但一般都沒有寫滑動刪除和滑動標題懸浮等功能,這個標題懸浮和那個tablayout吸頂差不多一個概念,都是增強了用戶的視覺,使用戶有更好的體驗。廢話不多說,列重點

  1. 滑動刪除及撤銷(SwipeDismissBehavior,Snackbar)

  2. 滑動列表控制控件消失和出現

  3. 實現下滑動懸浮效果

在這之前,首先添加依賴

   compile 'com.android.support:appcompat-v7:25.3.1'
   compile 'com.android.support:support-v4:25.3.1'
   compile 'com.android.support:design:25.3.1'
   compile 'com.android.support:recyclerview-v7:25.3.1'

 

1:滑動刪除及撤銷

例子:一個textview滑動消失,撤銷恢復。

  效果圖

1.1:創建布局文件design_main_layout.xml

這個布局文件非常簡單,只有一個CoordinatorLayout和TextView,但是CoordinatorLayout是重點,滑動控件什么的都和他有關,他也是一個布局,和線性布局什么的都一樣用,該布局是協調控件之間的聯系的。

<?xml version="1.0" encoding="utf-8"?>
<!--協調者布局-->
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:clickable="true"
        android:layout_gravity="center"
        android:background="#a8aace"
        android:text="滑動我試試"/>
</android.support.design.widget.CoordinatorLayout>

 1.2:Activity具體代碼

SwipeDismissBehavior主要是控制控件的行為,LayoutParams是布局參數,textview這個控件是在協調者布局中滑動的,所以,要獲取該布局的參數,然后再設置行為。behavior.setListener(this);這一行是必須寫的,如果不寫的話,就算滑掉了,按照原軌跡再滑過來,還是會顯示的,他只是我們看不到了而且,通道還在。

ViewCompat.animate(tv1).alpha(1).start();則是顯示滑掉的內容。

Snackbar的用法,我想大家一看就能懂,這就不多說了。

        tv1 = (TextView) findViewById(R.id.id_tv);
        CoordinatorLayout.LayoutParams cLayout=(CoordinatorLayout.LayoutParams) tv1.getLayoutParams();
        //第一種滑動方法
        SwipeDismissBehavior<TextView> behavior = new SwipeDismissBehavior<>();
        //如果不寫監聽的話,滑動消失后,還可再滑動出現。
        behavior.setListener(this);
        cLayout.setBehavior(behavior);

 該滑動刪除還是比較簡單的,相比那些還要計算坐標的方法簡單多了,

在這里有一個重點就是behavior的監聽,有兩個方法要重寫,而且是關鍵方法

 @Override
    public void onDismiss(View view) {
        view.setVisibility(View.GONE);
        Snackbar.make(view,"刪除控件",Snackbar.LENGTH_LONG)
                .setAction("撤銷",new View.OnClickListener(){
                    @Override
                    public void onClick(View v) {
                        tv1.setVisibility(View.VISIBLE);
                        //顯示,設置通道為1,因為Gone以后,通道就是0了。
                        ViewCompat.animate(tv1).alpha(1).start();
                    }
                }).show();
    }

    @Override
    public void onDragStateChanged(int state) {

    }

 

2:滑動列表控制控件消失和出現

例子:一個recyclerview,往下滑,則返回頂部圖標顯示,往上滑圖標不顯示,

原因:在很多段子軟件中,會有大量的文字和圖片,當用戶往下翻的時候,也就是說內容會不斷的在上方消失,下面的內容不算的刷新出來,這時右下角出現一個輔助用戶回到頂部的按鈕,因為在往上翻時候可能加載的了很多,有些用戶就像一步到達頂部,這就出現了滑動監聽。

效果圖:

2.1:創建布局文件

外層是協調者布局,中間就是一個類似於listview的RecyclerView,和一個右下角的返回頂部按鈕。

 <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/id_rview"
        app:layoutManager="LinearLayoutManager"
        ></android.support.v7.widget.RecyclerView>

    <ImageView
       
        android:id="@+id/id_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30dp"
        android:clickable="true"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"

        android:src="@mipmap/shoubu"
        />

 

 2.2:創建自定義Adapter和Behavior

 這里的適配器和繼承baseadapter類似,里面都是數據和泛型,但是該適配器是寫了Viewholder,onBindViewHolder返回數據項,onCreateViewHolder()方法是加載控件的,也就是樣式,返回值 是一個對象。

適配器因為不是重點,這里就不多說了,大家知道這是一個傳入list<String>的RecyclerView適配器就行

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
    public Context context;
    private List<String> list;
    public MyAdapter(Context context, List<String> list) {
        this.context = context;
        this.list = list;
    }
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        TextView view =new TextView(context);
        return new RecyclerView.ViewHolder(view){};
    }
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((TextView)holder.itemView).setText(list.get(position));
    }
    @Override
    public int getItemCount() {
        return list.size();
    }
}

 行為:繼承協調者布局中的Behavior,實現其中的兩個方法。

實現上下滑動監聽處理方法,其中的scaleX(0)和Y(0)是不顯示,為1則顯示。兩個方法都有關鍵作用,一個是滾動時,關心該事件,一個是開始滾動,監聽該事件。
public class MyBehavior extends CoordinatorLayout.Behavior {
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {//滾動發生時,關心該事件。
        return true;
    }

    /**滾動開始時,監聽該事件。
     * 滾動監聽*/
    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        if(dy < 0){
            ViewCompat.animate(child).scaleX(0).scaleY(0).start();
        }else{
            ViewCompat.animate(child).scaleX(1).scaleY(1).start();//顯示和不顯示
        }
    }
}

 2.3:Activity中邏輯處理代碼

  1. 通過id找到控件
  2. 然后賦值
  3. 然后添加適配器
  4. 然后添加行為
        img = (ImageView) findViewById(R.id.id_img);
        final List<String> list=new ArrayList<>();
        //添加數據
        final RecyclerView recyclerView= (RecyclerView) findViewById(R.id.id_rview);
        for(int i=0;i<100;i++){
            list.add("wo shi "+i);
        }
        myAdapter = new MyAdapter(this,list);
        recyclerView.setAdapter(myAdapter);
        CoordinatorLayout.LayoutParams cLayout=(CoordinatorLayout.LayoutParams) img.getLayoutParams();

        MyBehavior myBehavior=new MyBehavior();
        cLayout.setBehavior(myBehavior);

 關鍵來了,那么返回頂部的按鈕代碼怎么寫呢,其實呢,這就是更新一下適配就行了,這里我把更新后的數據改了,為了的就讓大家可以看清刷新了,

 img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               myAdapter.notifyDataSetChanged();
                //為了顯示出返回頂部成功,我把數據換了,可以讓大家看清變化。
                list.clear();
                for(int i=0;i<100;i++){
                    list.add("更新后: "+i);
                }
                myAdapter=new MyAdapter(DesignMainActivity.this,list);
                recyclerView.setAdapter(myAdapter);
                Toast.makeText(DesignMainActivity.this, "頂部定位成功", Toast.LENGTH_SHORT).show();
            }
        });

 

總結:該效果用普通的計算坐標方法也是可以實現的,但是這樣的方法比較簡單,起碼不用太費腦子也能實現自己想要的方法。

 3:實現下滑動懸浮效果

懸浮效果和tablayout什么的效果是一樣的,這個現象是為了讓用戶知道時時刻刻在瀏覽頁面的標題是什么,增強的了用戶的體驗。

效果圖:

這個是總的效果圖,根據屬性的不通,實現的效果也是不一樣的。比如說,toolbar在何時顯示,可以選擇只要是上滑就顯示,也可以選擇是滑到最上面的內容才顯示,這個例子就是滑動到最上面的內容toolbar再顯示。

3.1:創建xml文件

重點:一個是菜單列表----(懸停效果)這個textview 要寫在toolbar下面,AppBarLayout里面,否側不會出現這樣的效果,app:layout_scrollFlags="scroll|enterAlwaysCollapsed"這個就是說明toolbar在何時顯示。RecyclerView中

app:layout_behavior="@string/appbar_scrolling_view_behavior"方法是必須寫的,因為coordinatorlayout和幀布局相似,會覆蓋,在幀布局中寫上id然后說在某個控件下面或者上面就可以,這個布局就要寫app:layout_behavior即可。

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            android:id="@+id/id_toolbar"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="----菜單列表----(懸停效果)"/>
    </android.support.design.widget.AppBarLayout>

 3.2:Activity中邏輯處理

 Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);
        setSupportActionBar(toolbar);

 

添加即可。這樣就Ok了;  

總結:這里的代碼雖然看着少,那是因為大部分代碼都被封裝好了,我們一開始添加的依賴就是封裝好的包,懸停效果能夠給人一個很好的體驗,當你在翻一個軟件簡介的時候,無論翻多少行,標題始終都會在上頭懸浮,而且,懸浮的地方還可以添加點擊監聽,這都是可以自定義的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM