多的不说,先上效果图
主要功能简介:
一、ToolBar : 类似于ActionBar但功能更强大
二、DrawerLayout : 侧滑菜单 (需要配合 NavigationView使用)
三、 FloatingActionButton : 悬浮按钮
四、SnackBar: 带按钮的提示(加强版Toast)
五、CircleImageView : 图片圆形化 工具
六、RecyclerView : 列表(相当于ListView)
七、CardView :立体效果 八、Glide : 图片加载(会自行对图片进行压缩,防止内存溢出) 九、AppBarLayout :防止RecyclerView把Toolbar遮挡 十、SwipeRefreshLayout :下拉刷新代码如下:
添加依赖文件
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7:25.0.1' testCompile 'junit:junit:4.12' //robolectric 依赖 testCompile "org.robolectric:robolectric:3.0" //assertj 依赖 testCompile 'org.assertj:assertj-core:1.7.1' //图片圆形化 依赖 compile 'de.hdodenhof:circleimageview:2.1.0' //design 材料设计 依赖 compile 'com.android.support:design:25.0.1' //recyclerview 依赖 compile 'com.android.support:recyclerview-v7:25.0.1' //cardview 立体效果 依赖 compile 'com.android.support:cardview-v7:25.0.1' //glide 图片加载 依赖 compile 'com.github.bumptech.glide:glide:3.7.0' }style.xml中屏蔽自带的ActionBar <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> 添加以下layout <?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="180dp" android:padding="10dp" android:background="?attr/colorPrimary"> <!--图片圆形化CircleImageView--> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/icon_image" android:layout_width="70dp" android:layout_height="70dp" android:src="@drawable/pic2" android:layout_centerInParent="true"/> <TextView android:id="@+id/username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="user name" android:textColor="#FFF" android:textSize="14sp"/> <TextView android:id="@+id/mail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/username" android:text="user mail" android:textColor="#FFF" android:textSize="14sp"/> </RelativeLayout> <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView 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="wrap_content" android:layout_margin="5dp" app:cardCornerRadius="4dp"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/people_pic" android:layout_width="match_parent" android:layout_height="100dp" /> <TextView android:id="@+id/people_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="5dp" android:textSize="16sp"/> </LinearLayout> </android.support.v7.widget.CardView>添加菜单布局 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/backup" android:icon="@drawable/pic2" android:title="Backup" app:showAsAction="always"/> <item android:id="@+id/delete" android:icon="@drawable/pic3" android:title="Delete" app:showAsAction="ifRoom"/> <item android:id="@+id/setting" android:icon="@drawable/pic4" android:title="Setting" app:showAsAction="never"/> </menu> <?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/nav_call" android:icon="@mipmap/ic_launcher" android:title="call"/> <item android:id="@+id/nav_friend" android:icon="@mipmap/ic_launcher" android:title="friend"/> <item android:id="@+id/nav_location" android:icon="@mipmap/ic_launcher" android:title="location"/> <item android:id="@+id/nav_mail" android:icon="@mipmap/ic_launcher" android:title="mail"/> <item android:id="@+id/nav_task" android:icon="@mipmap/ic_launcher" android:title="task"/> </group> </menu>添加People类及适配器 package com.leixiansheng.materialdesigns; /** * Created by Leixiansheng on 2017/9/2. */ public class People { private String name; private int id; public People(int id, String name) { this.id = id; this.name = name; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } } package com.leixiansheng.materialdesigns; import android.content.Context; import android.support.v7.widget.CardView; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import java.util.List; /** * Created by Leixiansheng on 2017/9/2. */ public class PeopleAdapter extends RecyclerView.Adapter<PeopleAdapter.ViewHolder> { private Context context; private List<People> peopleList; static class ViewHolder extends RecyclerView.ViewHolder { CardView cardView; ImageView imageView; TextView textView; public ViewHolder(View itemView) { super(itemView); cardView = (CardView) itemView; imageView = (ImageView) itemView.findViewById(R.id.people_pic); textView = (TextView) itemView.findViewById(R.id.people_name); } } public PeopleAdapter(Context context, List<People> peopleList) { this.context = context; this.peopleList = peopleList; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (context == null) { context = parent.getContext(); } View view = LayoutInflater.from(context).inflate(R.layout.people_item,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(PeopleAdapter.ViewHolder holder, int position) { People people = peopleList.get(position); holder.textView.setText(people.getName()); Glide.with(context).load(people.getId()).into(holder.imageView); } @Override public int getItemCount() { return peopleList.size(); } } 主活动布局及代码 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!--CoordinatorLayout:加强版Fragment 使在内的控件不会被遮挡--> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--Toolbar:标题栏修改 1、去掉Manifest主题的ActionBar 2、xml中添加设置Toolbar 3、活动中添加Toolbar--> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- 下滑自动隐藏,上滑自动显示 app:layout_scrollFlags="scroll|enterAlways|snap"--> <android.support.v7.widget.Toolbar android:id="@+id/too_bar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap"> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <!--下拉刷新:SwipeRefreshLayout--> <!-- 空出Toolbar位置,防止遮挡 app:layout_behavior="@string/appbar_scrolling_view_behavior"--> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> </android.support.v4.widget.SwipeRefreshLayout> <!--悬浮按钮 阴影:elevation--> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/pic1" app:elevation="25dp"/> </android.support.design.widget.CoordinatorLayout> <!--用于滑动菜单--> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_menu" app:headerLayout="@layout/nav_header"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> package com.leixiansheng.materialdesigns; import android.content.Intent; import android.support.annotation.NonNull; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.NavigationView; import android.support.design.widget.Snackbar; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.Toast; import java.util.ArrayList; import java.util.List; import java.util.Random; /** * 要点:(都是UI) * 1、Toolbar:相当于ActionBar,但功能更强大 * 2、DrawerLayout:(空白的)侧滑菜单 * 3、NavigationView: 侧滑菜单布局 ,需要引入库 compile 'com.android.support:design:25.0.1' * 4、FloatingActionButton: 悬浮按钮 * 5、SnackBar: 带按键的提示控件,相当于更强大的Toast * 6、CoordinatorLayout: 加强版Fragment,使在内的控件不会被遮挡 * 7、CircleImageView :图片圆形化 * 8、RecyclerView : 列表(相当于ListView) * 9、CardView :立体效果 * 10、Glide : 图片加载(会自行对图片进行压缩,防止内存溢出) * 11、AppBarLayout :防止RecyclerView把Toolbar遮挡 * 12、SwipeRefreshLayout :下拉刷新 */ public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener, View.OnClickListener { private DrawerLayout drawerLayout; //侧滑菜单 private Toolbar toolbar; //标题栏 private NavigationView navigationView; //侧滑菜单布局 private FloatingActionButton fab; //悬浮按钮 private RecyclerView recyclerView; //列表 private SwipeRefreshLayout swipeRefresh; //下拉刷新 private People[] peoples = {new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2") ,new People(R.drawable.pic3,"pic_3"),new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5") ,new People(R.drawable.pic6,"pic_6"),new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2"),new People(R.drawable.pic3,"pic_3") ,new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5"),new People(R.drawable.pic6,"pic_6") ,new People(R.drawable.pic1,"pic_1"),new People(R.drawable.pic2,"pic_2"),new People(R.drawable.pic3,"pic_3") ,new People(R.drawable.pic4,"pic_4"),new People(R.drawable.pic5,"pic_5"),new People(R.drawable.pic6,"pic_6")}; private List<People> peopleList = new ArrayList<>(); private PeopleAdapter peopleAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); //添加Toolbar setSupportActionBar(toolbar); ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { //设置打开侧滑菜单按键 actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher); } initPeople(); initRecyclerView(); initRefresh(); setOnclickListener(); } /** * 下拉刷新初始化 */ private void initRefresh() { swipeRefresh.setColorSchemeResources(R.color.colorPrimary); //下拉颜色设置 //下拉监听 swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { refreshPeople(); } }); } /** * 下拉刷新 */ private void refreshPeople() { new Thread(new Runnable() { @Override public void run() { try { Thread.sleep(2000); //模拟耗时操作 } catch (InterruptedException e) { e.printStackTrace(); } //切换回主线程刷新数据 runOnUiThread(new Runnable() { @Override public void run() { initPeople(); peopleAdapter.notifyDataSetChanged(); swipeRefresh.setRefreshing(false); toast("refresh succeed"); } }); } }).start(); } /** * RecyclerView初始化 */ private void initRecyclerView() { GridLayoutManager manager = new GridLayoutManager(this, 2); //设置一行显示几个元素 recyclerView.setLayoutManager(manager); peopleAdapter = new PeopleAdapter(this, peopleList); //配置适配器 recyclerView.setAdapter(peopleAdapter); } /** * 数据初始化 */ private void initPeople() { peopleList.clear(); for (int i = 0; i < peoples.length; i++) { Random random = new Random(); int index = random.nextInt(peoples.length); peopleList.add(peoples[index]); } } /** * 按键监听 */ private void setOnclickListener() { navigationView.setNavigationItemSelectedListener(this); fab.setOnClickListener(this); } /** * 控件初始化 */ private void initView() { toolbar = (Toolbar) findViewById(R.id.too_bar); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); navigationView = (NavigationView) findViewById(R.id.nav_view); fab = (FloatingActionButton) findViewById(R.id.fab); recyclerView = (RecyclerView) findViewById(R.id.recycler_view); swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh); navigationView.setCheckedItem(R.id.nav_call); } /** * 菜单添加 */ @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true; } /** * 菜单点击响应 */ @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.backup: toast("backup"); break; case R.id.delete: toast("delete"); break; case R.id.setting: toast("setting"); break; case android.R.id.home: drawerLayout.openDrawer(GravityCompat.START); break; } return true; } private void toast(String str) { Toast.makeText(this, str, Toast.LENGTH_SHORT).show(); } /** * 侧滑菜单点击响应 */ @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { drawerLayout.closeDrawers(); //关闭侧滑菜单 return true; } /** *按键点击响应 */ @Override public void onClick(View view) { switch (view.getId()) { case R.id.fab: // toast("FAB clicked"); //新型提示,带按键 Snackbar.make(view, "删除数据", Snackbar.LENGTH_SHORT) .setAction("确定", new View.OnClickListener() { @Override public void onClick(View view) { toast("数据已删除"); } }).show(); break; } } } 参考于:第一行代码
