前言
这个是接着上面两篇开发的日记,上面两篇的日记:
纠正
因为我看到南航app侧滑的时候是内容菜单整个滑动,如果使用ActionBar的话。那么ActionBar是不会移动的,所以要达到这种效果就只有取消ActionBar,因为我的开发环境是android 5.0,所以取消ActionBar依然是在AndroidMenifest.xml文件里面修改主题:
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"
完整的AndroidMenifest.xml文件如下:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cn.karent.nanhang">
<application
android:allowBackup="true"
android:name=".util.MyApplication"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
分析
既然要加入侧滑,那么首先先编写侧滑菜单的布局:
<?xml version="1.0" encoding="utf-8"?>
<!--侧滑菜单的布局-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="300dp"
android:layout_marginRight="-150dp"
android:layout_alignParentRight="true"
android:layout_height="match_parent">
<!--显示头像和一个背景-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipChildren="false"
android:background="@drawable/me_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="left"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="-20dp"
android:layout_marginLeft="30dp"
android:src="@drawable/userhead_dealfut"/>
<ImageView
android:layout_width="60dp"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="30dp"
android:src="@drawable/wujiaoxing"/>
</LinearLayout>
</RelativeLayout>
<!--我的资料-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="62dp"
android:gravity="center"
android:divider="@drawable/under_line"
android:showDividers="end"
android:background="@color/menuColor"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:src="@drawable/user_icon1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="20sp"
android:textColor="@android:color/black"
android:text="@string/menu_home"/>
<ImageView
android:layout_width="25dp"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:src="@drawable/btn_icon_arrow"/>
</LinearLayout>
<!--修改密码-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="62dp"
android:gravity="center"
android:divider="@drawable/under_line"
android:background="@color/menuColor"
android:showDividers="end"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:src="@drawable/pwd_icon1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textSize="20sp"
android:textColor="@android:color/black"
android:text="@string/menu_modify_pwd"/>
<ImageView
android:layout_width="25dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="20dp"
android:layout_height="wrap_content"
android:src="@drawable/btn_icon_arrow"/>
</LinearLayout>
<!--关于-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="62dp"
android:gravity="center"
android:divider="@drawable/under_line"
android:background="@color/menuColor"
android:showDividers="end"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:src="@drawable/question"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:gravity="center"
android:textColor="@android:color/black"
android:layout_marginLeft="20dp"
android:text="@string/menu_abount"/>
<ImageView
android:layout_width="25dp"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:src="@drawable/btn_icon_arrow"/>
</LinearLayout>
<!--我的二维码-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="62dp"
android:gravity="center"
android:divider="@drawable/under_line"
android:background="@color/menuColor"
android:showDividers="end"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:src="@drawable/qcode"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="20dp"
android:gravity="center"
android:textSize="20sp"
android:textColor="@android:color/black"
android:text="@string/menu_qcode"/>
<ImageView
android:layout_width="25dp"
android:layout_marginLeft="10dp"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:src="@drawable/btn_icon_arrow"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/menuColor"
android:layout_weight="1">
<Button
android:layout_width="230dp"
android:layout_height="wrap_content"
android:text="登录"
android:background="@drawable/login_btn_shape"
android:textColor="@android:color/white"
android:layout_centerInParent="true"/>
</RelativeLayout>
</LinearLayout>
上面也没什么好说的,也是堆出来的布局,然后自定义一个侧滑菜单Layout,具体可以参考我的博客:
我上面写的不完全,感兴趣的可以自己修改下,增加Touch事件监听,如果用我上面的代码会屏蔽掉Banner的滚动,而且原南航app好像也没有滑动侧滑,而是点击右上角的头像侧滑,所以我直接取消了滑动侧滑,修改后的源码如下:
package cn.karent.nanhang.UI;
import android.content.Context;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import cn.karent.nanhang.R;
import cn.karent.nanhang.util.ScreenUtil;
/**
* Created by wan on 2016/12/6.
* 侧滑菜单,内容会偏移
*/
public class SlideLayout extends RelativeLayout {
private Context mContext;
private static final int MOTION_VELOCITY = 300;
/*
是否是第一次调用onLayout方法
*/
private boolean mLoadOnece = false;
/*
左边侧滑菜单的布局参数
*/
private MarginLayoutParams mLeftParams;
/*
右边内容的布局参数
*/
private MarginLayoutParams mMenuParams;
/*
左边的侧滑View
*/
private View mLeftView;
/*
中间的内容View
*/
private View mMenuView;
private float mOldX;
private float mOldY;
/*
* 屏幕的宽度
*/
private int mScreenWidth;
/**
* 控件能够移动到的左边界
*/
private int mLeftEdge = 300;
public SlideLayout(Context context) {
super(context);
mContext = context;
}
public SlideLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mContext = context;
}
/**
* 布局
*/
public void onLayout(boolean change, int l, int t, int r, int b) {
super.onLayout(change, l, t, r, b);
if( change && !mLoadOnece) {
mLeftEdge = ScreenUtil.dp2px(300);
mLeftView = findViewById(R.id.slide_content);
mMenuView = findViewById(R.id.slide_menu);
mLeftParams = (MarginLayoutParams) mLeftView.getLayoutParams();
mMenuParams = (MarginLayoutParams)mMenuView.getLayoutParams();
DisplayMetrics dm = getResources().getDisplayMetrics();
mScreenWidth = dm.widthPixels;
mLoadOnece = true;
}
}
/**
* 切换菜单的显示和隐藏
*/
public void switchMenu() {
if( mLeftParams.leftMargin == 0) {
showMenu();
} else {
hideMenu();
}
}
/**
* 显示菜单
*/
public void showMenu() {
new SmoothScrollTack().execute(-mLeftEdge, mLeftParams.leftMargin);
}
/**
* 隐藏菜单
*/
public void hideMenu() {
new SmoothScrollTack().execute(0, mLeftParams.leftMargin);
}
/**
* 修改View的边距来达到移动的效果
* @param leftMargin
*/
private void modifyLeftMargin(int leftMargin) {
//如果左边距大于0代表将要向右变压缩,应该禁止
if( leftMargin > 0 ) {
mLeftParams.leftMargin = 0;
mMenuView.setTranslationX(0);
//控制左边界滑动
} else if( leftMargin < -mLeftEdge) {
mLeftParams.leftMargin = -mLeftEdge;
mMenuView.setTranslationX(-mLeftEdge / 2);
} else {
mLeftParams.leftMargin = leftMargin;
mMenuView.setTranslationX(leftMargin / 2);
}
mLeftParams.width = mScreenWidth;
mLeftView.setLayoutParams(mLeftParams);
}
/**
* 当侧滑停止的时候来出来接下来的滑动
*/
private class SmoothScrollTack extends AsyncTask<Integer, Integer, Integer> {
@Override
protected void onProgressUpdate(Integer... values) {
int leftMargin = values[0];
modifyLeftMargin(leftMargin);
}
/**
* 计算下一个leftMargin值,第一个参数的目标值
* 第二个参数是当前的边距
* @param params
* @return
*/
@Override
protected Integer doInBackground(Integer... params) {
int targetLeftMargin = params[0];
int currentLeftMargin = params[1];
int leftMargin = currentLeftMargin;
int step = targetLeftMargin == 0 ? 10 : -10;
while(true) {
leftMargin += step;
//判断是否滑动完成
if( leftMargin < -mLeftEdge ) {
leftMargin = -mLeftEdge;
break;
}
if( leftMargin > 0 ) {
leftMargin = 0;
break;
}
publishProgress(leftMargin);
try {
Thread.sleep(5);
} catch( InterruptedException e) {
e.printStackTrace();
}
}
publishProgress(leftMargin);
return leftMargin;
}
}
}
我在里面添加了三个函数并删除了onTouchEvent事件:
/**
* 切换菜单的显示和隐藏
*/
public void switchMenu() {
if( mLeftParams.leftMargin == 0) {
showMenu();
} else {
hideMenu();
}
}
/**
* 显示菜单
*/
public void showMenu() {
new SmoothScrollTack().execute(-mLeftEdge, mLeftParams.leftMargin);
}
/**
* 隐藏菜单
*/
public void hideMenu() {
new SmoothScrollTack().execute(0, mLeftParams.leftMargin);
}
具体的代码逻辑我就不罗嗦了,我前面的博客有讲,下面就是主布局了:
<?xml version="1.0" encoding="utf-8"?>
<!--侧滑菜单-->
<cn.karent.nanhang.UI.SlideLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/slide"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--菜单布局-->
<include android:id="@+id/slide_menu" layout="@layout/main_menu_layout"/>
<!--内容布局-->
<include android:id="@+id/slide_content" layout="@layout/content_layout"/>
</cn.karent.nanhang.UI.SlideLayout>
这里使用include标签包含了两个布局,@layout/main_menu_layout这个是前面刚讲的策划菜单布局,@layout/content_layout是上篇博客讲的主界面布局,然后修改MainActvity:
package cn.karent.nanhang;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Slide;
import android.view.View;
import android.widget.ImageView;
import cn.karent.nanhang.UI.NewsUI;
import cn.karent.nanhang.UI.SlideLayout;
public class MainActivity extends AppCompatActivity {
/**
* 封装跟新闻有关的UI
*/
private NewsUI mNewsUI;
private ImageView headUser;
private SlideLayout slide;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.content_layout);
setContentView(R.layout.main);
headUser = (ImageView)findViewById(R.id.head_user);
slide = (SlideLayout)findViewById(R.id.slide);
//设置titile
mNewsUI = new NewsUI(this);
headUser.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
slide.switchMenu();
}
});
}
}
这里将加载ActionBar的那一段代码删掉了,给右上角的ImageView添加点击事件,点击一下开始切换菜单
效果
再上一张原app的界面:
这就是今天的代码了!