一：菜单的实现

好久不来写博客了，主要最近太忙（lan），不过最近终于换了台电脑可以跑得起Android Studio了，之前项目只做了模型就歇着了，今天反思前一阵日子过得太悠闲决定把模型重构一遍，今天先实现了一下菜单部分。首先是一进来有一个欢迎界面，也就是一个大图，等待1秒之后切换到菜单界面，代码如下：

package com.dlmu.panda.cat;import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import java.util.Timer;import java.util.TimerTask;public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Timer timer = new Timer();        TimerTask task = new TimerTask() {            @Override            public void run() {                Intent intent = new Intent(MainActivity.this, MenuActivity.class);                startActivity(intent);                finish();            }        };        timer.schedule(task,1000);    }}

XML中就一张背景图，不过我还是贴上来吧：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/imageView"        android:layout_alignParentTop="true"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true"        android:background="@drawable/welcome_background"/></RelativeLayout>

然后就到了菜单列表，既然用上了AndroidStudio关于Material Design的一些东西自然是必须要用到的，首自然是定义一个抽屉，在activity_menu.xml中：

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <FrameLayout        android:id="@+id/content_frame"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <FrameLayout        android:id="@+id/left_frame"        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="start"/></android.support.v4.widget.DrawerLayout>

再贴上Activity的代码:

package com.dlmu.panda.cat;import android.os.Bundle;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentTransaction;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.view.View;/** * Created by panda on 2016/5/12. */public class MenuActivity extends AppCompatActivity {    DrawerLayout drawerLayout;    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_menu);        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        MenuFragment menu = new MenuFragment();        MenuContentFragment menuContent = new MenuContentFragment();        FragmentManager fm = getSupportFragmentManager();        FragmentTransaction transaction = fm.beginTransaction();        transaction.add(R.id.left_frame, menu);        transaction.add(R.id.content_frame, menuContent).commit();    }    public void openDrawer(){        drawerLayout.openDrawer((View)findViewById(R.id.left_frame));    }}

左边自然是搞一个列表，不过先不管他，弄一块空白替换上去，中间的内容是最重要的，这里用到了toolBar和一个水波纹的控件，参考了这个界面：

水波纹插件的github在这里，使用非常简单，把它当做一个layout包在你使用的控件外面就可以了，最后得到的XML文件如下：

<?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"    android:background="@color/darkPrimary"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">            <android.support.v7.widget.Toolbar                android:layout_width="match_parent"                android:layout_height="50dp"                android:background="@color/primary"                android:id="@+id/toolbar"                app:layout_scrollFlags="scroll|enterAlways"                app:title="二三四"                app:titleTextColor="@color/divder"                app:navigationIcon="@drawable/ic_reorder_white_18dp">            </android.support.v7.widget.Toolbar>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <LinearLayout android:layout_height="wrap_content"                android:layout_width="match_parent"                android:orientation="horizontal">                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon1"                    android:id="@+id/icon1">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_fiber_new_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="物流资讯"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon2"                    android:id="@+id/icon2">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_directions_car_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="车源信息"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>            </LinearLayout>            <LinearLayout android:layout_height="wrap_content"                android:layout_width="match_parent"                android:orientation="horizontal">                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon6"                    android:id="@+id/icon3">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_directions_bus_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="货源信息"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon5"                    android:id="@+id/icon4">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_photo_camera_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="二维码"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>            </LinearLayout>            <LinearLayout android:layout_height="wrap_content"                android:layout_width="match_parent"                android:orientation="horizontal">                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon4"                    android:id="@+id/icon5">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_local_shipping_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="车辆登记"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon3"                    android:id="@+id/icon6">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_map_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="货源推荐"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>            </LinearLayout>            <LinearLayout android:layout_height="wrap_content"                android:layout_width="match_parent"                android:orientation="horizontal">                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon2"                    android:id="@+id/icon7">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_place_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="物流跟踪"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>                <com.andexert.library.RippleView                    android:layout_width="190dp"                    android:layout_height="190dp"                    android:background="@color/icon1"                    android:id="@+id/icon8">                    <LinearLayout                        android:layout_width="match_parent"                        android:layout_height="match_parent"                        android:gravity="center"                        android:orientation="vertical"                        android:layout_gravity="center">                        <ImageView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:gravity="center"                            android:scaleX="2"                            android:scaleY="2"                            android:layout_margin="16dp"                            android:src="@drawable/ic_rate_review_white_48dp"/>                        <TextView android:layout_height="wrap_content"                            android:layout_width="wrap_content"                            android:textColor="@color/icon"                            android:text="货源登记"                            android:textSize="15sp"/>                    </LinearLayout>                </com.andexert.library.RippleView>            </LinearLayout>        </LinearLayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

由于不知道怎么让方块保证是正方形，我只能在Fragment里面用动态布局了，于是Fragment的代码看上去会非常冗余：

package com.dlmu.panda.cat;import android.graphics.Color;import android.graphics.Point;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.support.v7.widget.Toolbar;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.ScaleAnimation;import android.widget.ImageView;import android.widget.LinearLayout;import com.andexert.library.RippleView;import java.util.ArrayList;import java.util.List;public class MenuContentFragment extends Fragment {    Toolbar toolbar;    View v;    LinearLayout ll;    List<RippleView> list = new ArrayList<RippleView>();    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        v = inflater.inflate(R.layout.fragment_menu_content, container, false);        toolbar = (Toolbar) v.findViewById(R.id.toolbar);        ((MenuActivity)getActivity()).setSupportActionBar(toolbar);        toolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                ((MenuActivity)getActivity()).openDrawer();            }        });        initView();        return v;    }    private void initView() {        Point point = new Point();        ((MenuActivity)getActivity()).getWindowManager().getDefaultDisplay().getSize(point);        int width = point.x/2;        RippleView rv1 = (RippleView) v.findViewById(R.id.icon1);        RippleView rv2 = (RippleView) v.findViewById(R.id.icon2);        RippleView rv3 = (RippleView) v.findViewById(R.id.icon3);        RippleView rv4 = (RippleView) v.findViewById(R.id.icon4);        RippleView rv5 = (RippleView) v.findViewById(R.id.icon5);        RippleView rv6 = (RippleView) v.findViewById(R.id.icon6);        RippleView rv7 = (RippleView) v.findViewById(R.id.icon7);        RippleView rv8 = (RippleView) v.findViewById(R.id.icon8);        ViewGroup.LayoutParams para;        para = rv1.getLayoutParams();        para.width=width;        para.height= width;        rv1.setLayoutParams(para);        rv2.setLayoutParams(para);        rv3.setLayoutParams(para);        rv4.setLayoutParams(para);        rv5.setLayoutParams(para);        rv6.setLayoutParams(para);        rv7.setLayoutParams(para);        rv8.setLayoutParams(para);        rv1.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv2.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv3.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv4.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv5.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv6.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv7.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });        rv8.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {            @Override            public void onComplete(RippleView rippleView) {                Log.d("Sample", "Ripple completed");            }        });    }}

最后实现的效果是这个样子的：

本部分总结：

一：实现水波纹特效可以借助项目RippleEffect来实现，在反馈点击事件时由于必须在水波纹反馈之后再进行使用如下方法：

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {     @Override     public void onComplete(RippleView rippleView) {         Log.d("Sample", "Ripple completed");    }});

二：在框架中使用NestedScrollView来保证整体的响应。

三：求问有没有更好的保证View与屏幕成比例而且长宽也成比例的方法啊。

最后，本项目的源码最后将会公布出来，但是由于本项目的设计是申请了专利的所以至少在交通运输领域的同行们请不要原样抄袭本博客的内容用作商业用途。