MeterailDesign最佳UI设计

爱被打了一巴掌 2022-06-10 03:59 202阅读 0赞

**运行截图**  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][SouthEast 3]  
github仓库代码:**[请点这里][Link 1]**  
**MainActivity.java**

package com.sdutacm.materialtest;
    
    import android.os.Bundle;
    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.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.Toast;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Random;
    
    public class MainActivity extends AppCompatActivity {
    
        private DrawerLayout mDrawerLayout;
    
        private Fruit[] fruits = {new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana),
                new Fruit("Orange",R.drawable.orange),new Fruit("WaterMelon",R.drawable.watermelon),
                new Fruit("Pear",R.drawable.pear),new Fruit("Grape",R.drawable.grape),
                new Fruit("Pineapple",R.drawable.pineapple),new Fruit("Strawberry",R.drawable.strawberry),
                new Fruit("Cherry",R.drawable.cherry),new Fruit("Mango",R.drawable.mango)};
    
        private List<Fruit> fruitList = new ArrayList<>();
    
        private FruitAdapter adapter;
    
        private SwipeRefreshLayout swipeRefresh;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
            setSupportActionBar(toolbar);
            mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
            final NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
            FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
            swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swip_refresh);
            //设置下拉进度条的颜色
            swipeRefresh.setColorSchemeResources(R.color.colorPrimary);
            //设置下拉刷新监听器 当触发了下拉刷新操作的时候就会回调这个监听器的onRefresh()方法,然后我们在这里就可以处理
            //具体的刷新逻辑就可以了
            swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() { //去网络请求最新的数据,然后再将这些数据展示出来
                    refreshFruits(); //进行本地刷新
                }
            });
    
            initFruits();
            RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
            GridLayoutManager layoutManager = new GridLayoutManager(this,2);
            recyclerView.setLayoutManager(layoutManager);
            adapter = new FruitAdapter(fruitList);
            recyclerView.setAdapter(adapter);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
    //                Toast.makeText(MainActivity.this,"TAB clicked",Toast.LENGTH_SHORT).show();
                    Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT)
                            .setAction("Undo", new View.OnClickListener() {
                                @Override
                                public void onClick(View v) {
                                    Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                                }
                            }).show();
                }
            });
            ActionBar actionBar = getSupportActionBar();
            if(actionBar != null){
                //显示导航按钮
                actionBar.setDisplayHomeAsUpEnabled(true);
                //设置导航按钮图标
                actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
            }
            navView.setCheckedItem(R.id.nav_call);
            navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    mDrawerLayout.closeDrawer(navView);
                    return true;
                }
            });
        }
    
        private void refreshFruits() {
            //先开启一个线程 然后将线程沉睡两秒钟
            new Thread(new Runnable() {
                @Override
                public void run() {
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    //将线程切换回主线程
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            //重新生成数据
                            initFruits();
                            adapter.notifyDataSetChanged(); //通知数据发生了变化
                            swipeRefresh.setRefreshing(false);  //表示刷新事件结束,并隐藏刷新进度条
                        }
                    });
    
                }
            }).start();
        }
    
        private void initFruits() {
            fruitList.clear();
            for (int i=0; i<50; i++){
        
                Random random = new Random();
                int index = random.nextInt(fruits.length);
                fruitList.add(fruits[index]);
            }
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.toolbar,menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()){
                case R.id.backup:
                    Toast.makeText(MainActivity.this,"You Click the Backup",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.delete:
                    Toast.makeText(MainActivity.this,"You Click the Delete",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.setting:
                    Toast.makeText(MainActivity.this,"You Click the Setting",Toast.LENGTH_SHORT).show();
                    break;
                case android.R.id.home:
                    mDrawerLayout.openDrawer(GravityCompat.START);
                    break;
                default:
            }
            return true;
        }
    }

**FruitActivity.java**

package com.sdutacm.materialtest;
    
    import android.content.Intent;
    import android.support.design.widget.CollapsingToolbarLayout;
    import android.support.v7.app.ActionBar;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.support.v7.widget.Toolbar;
    import android.view.MenuItem;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.bumptech.glide.Glide;
    
    public class FruitActivity extends AppCompatActivity {
        
    
        public static final String FRUIT_NAME = "fruit_image_id";
    
        public static final String FRUIT_IMAGE_ID = "fruit_image_id";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_fruit);
            //我们通过Intent获取到传入的水果名和水果图片的资源id,
            // 然后通过findviewById()方法拿到刚才在布局文件中
            // 定义的各个中间的实例
            Intent intent = getIntent();
            String fruitName = intent.getStringExtra(FRUIT_NAME);
            int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
            CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
            ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
            TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
            setSupportActionBar(toolbar);
            ActionBar actionBar = getSupportActionBar();
            if(actionBar != null){
                actionBar.setDisplayHomeAsUpEnabled(true);
            }
            //将水果名设置成当前界面的标题,
            collapsingToolbar.setTitle(fruitName);
            //然后使用Glide加载传入的水果图片,
            Glide.with(this).load(fruitImageId).into(fruitImageView);
            String fruitContent = generateFruitContent(fruitName);
            //并设置成到标题栏的ImageView上面
            fruitContentText.setText(fruitContent);
        }
    
        private String generateFruitContent(String fruitName) {
            StringBuilder fruitContent = new StringBuilder();
            for (int i=0;i<500;i++){
                fruitContent.append(fruitName);
            }
            return fruitContent.toString();
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            //处理了HomeAsUp按钮的点击事件,当点击了这个按钮时
            // ,就调用finish()来关闭的活动,并返回上一个活动
            switch (item.getItemId()){
                case android.R.id.home:
                    finish();
                    return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }

**FruitAdapter**

package com.sdutacm.materialtest;
    
    import android.content.Context;
    import android.content.Intent;
    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 bummer on 2017/8/9.
     */
    
    public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder>{
        private Context mContext;
    
        private List<Fruit> mFruitList;
    
        static class ViewHolder extends RecyclerView.ViewHolder{
            CardView cardView;
            ImageView fruitImage;
            TextView fruitName;
            public ViewHolder(View itemView) {
                super(itemView);
                cardView = (CardView) itemView;
                fruitImage = (ImageView) itemView.findViewById(R.id.fruit_image);
                fruitName = (TextView) itemView.findViewById(R.id.fruit_name);
            }
        }
    
        public FruitAdapter(List<Fruit> fruitList) {
            this.mFruitList = fruitList;
        }
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
            if(mContext == null){
                mContext = parent.getContext();
            }
            View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
            final ViewHolder holder = new ViewHolder(view);
            holder.cardView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = holder.getAdapterPosition();
                    Fruit fruit = mFruitList.get(position);
                    Intent intent = new Intent(mContext,FruitActivity.class);
                    intent.putExtra(FruitActivity.FRUIT_NAME,fruit.getName());
                    intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.getImageId());
                    mContext.startActivity(intent);
                }
            });
            return holder;
        }
        public void onBindViewHolder(ViewHolder holder,int position){
            Fruit fruit = mFruitList.get(position);
            holder.fruitName.setText(fruit.getName());
            Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
        }
        public int getItemCount(){
            return mFruitList.size();
        }
    }

**Fruit.java**

package com.sdutacm.materialtest;
    
    /**
     * Created by bummer on 2017/8/9.
     */
    
    public class Fruit {
        
        private String name; //水果的名字
    
        private int imageId; //水果图片资源对应的Id
    
        public Fruit(String name,int imageId){
            this.name = name;
            this.imageId = imageId;
        }
        public String getName(){
            return name;
        }
        public int getImageId(){
            return imageId;
        }
    }

**activity\_fruit.xml**

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.sdutacm.materialtest.FruitActivity">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/fruit_image_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax" />
    
                <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    
                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="15dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="35dp"
                    app:cardCornerRadius="4dp">
    
                    <TextView
                        android:id="@+id/fruit_content_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="10dp" />
                </android.support.v7.widget.CardView>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/ic_comment"
            app:layout_anchor="@id/appBar"
            app:layout_anchorGravity="bottom|end" />
    
    </android.support.design.widget.CoordinatorLayout>

**fruit\_item.xml**

<?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:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
            <ImageView
                android:id="@+id/fruit_image"
                android:layout_width="match_parent"
                android:layout_height="100dp"
               />
    
            <TextView
                android:id="@+id/fruit_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>

**activity\_main.xml**

<?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">
    
        <android.support.design.widget.CoordinatorLayout 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"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.sdutacm.materialtest.MainActivity">
    
            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolBar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:layout_scrollFlags="scroll|enterAlways|snap"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    
    
            </android.support.design.widget.AppBarLayout>
    
            <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/swip_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"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
            </android.support.v4.widget.SwipeRefreshLayout>
    
    
            <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:elevation="8dp"
                android:src="@drawable/ic_done" />
    
    
        </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:headerLayout="@layout/nav_header"
            app:menu="@menu/nav_menu" />
    
    </android.support.v4.widget.DrawerLayout>

**nav\_head.xml**

<?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"
        android:orientation="vertical">
    
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/icon_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_centerInParent="true"
            android:src="@drawable/nav_icon" />
    
        <TextView
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="tonygreendev@gmail.com"
            android:textColor="#FFF"
            android:textSize="14sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/mail"
            android:layout_above="@id/username"
            android:text="Tony Green"
            android:textColor="#FFF"
            android:textSize="14sp"
            />
    </RelativeLayout>

**menu/nav\_menu.xml**

<?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="@drawable/nav_call"
                android:title="Call" />
            <item
                android:id="@+id/nav_friends"
                android:icon="@drawable/nav_friends"
                android:title="Friends" />
            <item
                android:id="@+id/nav_location"
                android:icon="@drawable/nav_location"
                android:title="Location" />
            <item
                android:id="@+id/nav_mail"
                android:icon="@drawable/nav_mail"
                android:title="Call" />
            <item
                android:id="@+id/nav_task"
                android:icon="@drawable/nav_task"
                android:title="Task" />
    
        </group>
    </menu>

**menu/toolbar.xml**

<?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/ic_backup"
            android:title="Backup"
            app:showAsAction="always"></item>
        <item
            android:id="@+id/delete"
            android:icon="@drawable/ic_delete"
            android:title="Delete"
            app:showAsAction="ifRoom"></item>
        <item
            android:id="@+id/setting"
            android:icon="@drawable/ic_setting"
            android:title="Setting"
            app:showAsAction="never"></item>
    </menu>

**values-v21/styles.xml**

<resources>
    
        
        <style name="FruitActivity" parent="AppTheme">
            
            <item name="android:statusBarColor">@color/transparent</item>
        </style>
    
    </resources>

**value/style.xml**

<resources>
    
        
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
        <style name="FruitActivityTheme" parent="AppTheme"/>
    
    </resources>

**AndroidManifest.xml**

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.sdutacm.materialtest">
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity
                android:name=".MainActivity"
                android:label="Fruits">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
            <activity android:name=".FruitActivity"
                android:theme="@style/FruitActivityTheme"
                ></activity>
        </application>
    
    </manifest>

[SouthEast]: /images/20220610/31e5afc72f484a87ad18f49f5121918d.png
[SouthEast 1]: /images/20220610/8b0769fb252d479c93a7c3a7c2287dff.png
[SouthEast 2]: /images/20220610/9b62f8401e514e7ea5f9f6151ccde8d5.png
[SouthEast 3]: /images/20220610/f556285729634ea9aebd2cb0e9a2d2bb.png
[Link 1]: https://github.com/XQXZ/android/tree/master/MaterialTest