Material Design控件使用(一)

作者: 阳春面 | 来源:发表于2015-06-24 23:15 被阅读2349次

    Google 发布的Material Design支持库,对我们的APP设计有很大的影响,
    如果重新设计APP,支持库应该直接用V4提升到V7了,我们可以用Toolbar代替ActionBar,
    以及引入了RecycleView, SnakeBar等新控件。

    我写了一个Demo来学习使用这些新控件。

    新建项目,加入依赖包

    我们使用Android Studio来开发这个Demo,在Android Studio新建一个项目,
    修改App Module的build.gradle文件,把compileSdkVersion和targetSdkVersion改为21,
    因为Material Design支持库需要Android 5.0以上作为编译SDK。
    同时要加入相关依赖包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方法,需要自己实现。
           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的点击事件中调用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();
                }
            }
    

    项目源码已发布到Github,以后慢慢加入其他控件的使用。
    源码地址:MaterialDesignExample

    本文作者: 阳春面
    原文地址:http://www.aswifter.com/2015/06/24/Material-Design-Example-1/

    欢迎关注我的微信公众号,分享Android 开发,IOS开发,Swift开发和互联网内容
    微信号:APP开发者

    相关文章

      网友评论

      • 暴走的羊驼:项目运行就会把报错
        阳春面:@心扉ss 请问是什么错误,另外你的AS是什么版本? 我刚刚验证一下,用AS1.5可以正常运行的。

      本文标题:Material Design控件使用(一)

      本文链接:https://www.haomeiwen.com/subject/qxteqttx.html