快捷導(dǎo)航

學(xué)習(xí)使用Material Design控件（一）

更新時間：2017年07月28日 09:37:29 作者：貴公子

這篇文章主要為大家介紹了學(xué)習(xí)使用Material Design控件的詳細(xì)教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Google 發(fā)布的Material Design支持庫，對我們的APP設(shè)計有很大的影響，如果重新設(shè)計APP，支持庫應(yīng)該直接用V4提升到V7了，我們可以用Toolbar代替ActionBar，以及引入了RecycleView, SnakeBar等新控件。

我寫了一個Demo來學(xué)習(xí)使用這些新控件。

新建項目，加入依賴包

我們使用Android Studio來開發(fā)這個Demo，在Android Studio新建一個項目，修改App Module的build.gradle文件，把compileSdkVersion和targetSdkVersion改為21，因為Material Design支持庫需要Android 5.0以上作為編譯SDK。

同時要加入相關(guān)依賴包design和RecyclerView支持包。

android {
  compileSdkVersion 21
  buildToolsVersion ”21.1.2”

  defaultConfig {
    applicationId ”materia.aswifter.com.materialexample”
    minSdkVersion 15
    targetSdkVersion 21
    versionCode 1
    versionName ”1.0”
  }
  buildTypes {
    release {
      minifyEnabled false
      proguardFiles getDefaultProguardFile('proguard-android.txt'), ‘proguard-rules.pro'
    }
  }
}

dependencies {
  compile fileTree(dir: ‘libs', include: [‘*.jar'])
  compile 'com.android.support:design:22.2.0'
  compile 'com.android.support:recyclerview-v7:22.0.+'
}

新建Layout

新建activity_main.xml，在其中我們加入Toolbar和RecyclerView

<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:background="?attr/colorPrimaryDark">
  </android.support.v7.widget.Toolbar>

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

</RelativeLayout>

新建Activity

新建MainActivity繼承自AppCompatActivity

加入ToolBar

setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

使用RecyclerView

RecyclerView是用來替換ListView的，它在里面封裝ViewHolder的一些處理，
不過RecyclerView沒有setOnItemClickListener方法，需要自己實現(xiàn)。

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
 // use this setting to improve performance if you know that changes
 // in content do not change the layout size of the RecyclerView
 mRecyclerView.setHasFixedSize(true);

 // use a linear layout manager
 mLayoutManager = new LinearLayoutManager(this);
 mRecyclerView.setLayoutManager(mLayoutManager);

 // specify an adapter (see also next example)
 myDataset = new String[]{"JAVA", "Objective-C", "C", "C++", "Swift",
     "GO", "JavaScript", "Python", "Ruby", "HTML", "SQL"};
 mAdapter = new MyAdapter(myDataset);
 mRecyclerView.setAdapter(mAdapter);

使用Snackbar

Snackbar的使用類似于Toast，我在RecyclerView的Item的點擊事件中調(diào)用Snackbar，
顯示TextView中的文字。

public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
      // each data item is just a string in this case
      public TextView mTextView;

      public ViewHolder(View v) {
        super(v);
        mTextView = (TextView) v.findViewById(R.id.textView);
        v.setOnClickListener(this);
      }

      @Override
      public void onClick(View view) {
        Snackbar.make(view, mTextView.getText(), Snackbar.LENGTH_SHORT).show();
      }
    }

項目源碼已發(fā)布到Github，以后慢慢加入其他控件的使用。

源碼地址：MaterialDesignExample

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: