今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千。当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强大了。下面我来展示一下我做的效果截图。

我做的界面有点丑,但是对比之前已经是有了很大的改观了。想做这样的效果的话可以ps几张比较好看的图片。

下面就是粘贴我代码的时间了。

activity_main.xml

<cn.edu.rjxy.activity.DragLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg1"
android:clickable="true"
android:orientation="vertical" > <!-- 左侧菜单页面 --> <include layout="@layout/leftmenu" /> <cn.edu.rjxy.activity.MyRelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#eeeeee"
android:orientation="vertical" > <!-- headbanner --> <include layout="@layout/middleview" />
</cn.edu.rjxy.activity.MyRelativeLayout> </cn.edu.rjxy.activity.DragLayout>

leftmenu.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="match_parent"
android:paddingBottom="30dp"
android:paddingLeft="30dp"
android:paddingTop="10dp" > <LinearLayout
android:id="@+id/menu_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:orientation="horizontal"
android:padding="5dp" > <ImageView
android:id="@+id/iv_headimage"
android:layout_width="55dp"
android:layout_height="55dp"
android:src="@drawable/ic_launcher" /> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|left"
android:layout_marginLeft="6dp"
android:orientation="vertical" > <TextView
android:id="@+id/tv_sname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="员工名"
android:textColor="#ffffff"
android:textSize="15sp" /> <TextView
android:id="@+id/tv_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#ffffff"
android:text="蝴蝶为花醉,花却随风飞,花舞花落泪,花哭花瓣飞"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout> <TextView
android:id="@+id/tv_setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="设置"
android:drawablePadding="5dp"
android:gravity="center"
android:drawableLeft="@drawable/ic_launcher"
android:textColor="#ffffff"
android:textSize="15sp" /> <ListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@id/tv_setting"
android:layout_below="@id/menu_header"
android:layout_marginBottom="30dp"
android:layout_marginTop="20dp"
android:cacheColorHint="#00000000"
android:divider="@null"
android:scrollbars="none"
android:textColor="#ffffff" /> </RelativeLayout>

menulist_item_text.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:orientation="horizontal" > <ImageView
android:id="@+id/menu_imageView1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_launcher" /> <TextView
android:id="@+id/menu_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:text="菜单1"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout> </LinearLayout>

middleview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white"
android:orientation="vertical" > <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="40dp"
android:background="#00C5CD"
android:orientation="horizontal" > <ImageButton
android:id="@+id/menu_imgbtn"
android:layout_width="20dp"
android:layout_height="15dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="1dp"
android:background="@drawable/leftmenu_btn_selector" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/app_name"
android:textColor="@android:color/white"
android:textSize="20dp" />
</RelativeLayout> </LinearLayout>

leftmenu_btn_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/leftmenu_btn_press" android:state_pressed="true"/>
<item android:drawable="@drawable/leftmenu_btn" android:state_pressed="false"/> </selector>
MyRelativeLayout 
package cn.edu.rjxy.activity;

import cn.edu.rjxy.activity.DragLayout.Status;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.LinearLayout; public class MyRelativeLayout extends LinearLayout {
private DragLayout dl; public MyRelativeLayout(Context context) {
super(context);
} public MyRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
} public void setDragLayout(DragLayout dl) {
this.dl = dl;
} @Override
public boolean onInterceptTouchEvent(MotionEvent event) {
if (dl.getStatus() != Status.Close) {
return true;
}
return super.onInterceptTouchEvent(event);
} @Override
public boolean onTouchEvent(MotionEvent event) {
if (dl.getStatus() != Status.Close) {
if (event.getAction() == MotionEvent.ACTION_UP) {
dl.close();
}
return true;
}
return super.onTouchEvent(event);
} }
DragLayout 
package cn.edu.rjxy.activity;

import com.nineoldandroids.view.ViewHelper;

import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff.Mode;
import android.support.v4.view.GestureDetectorCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout; public class DragLayout extends FrameLayout { private boolean isShowShadow = true; private GestureDetectorCompat gestureDetector;
private ViewDragHelper dragHelper;
private DragListener dragListener;
private int range;
private int width;
private int height;
private int mainLeft;
private Context context;
private ImageView iv_shadow;
private RelativeLayout vg_left;
private MyRelativeLayout vg_main;
private Status status = Status.Close; public DragLayout(Context context) {
this(context, null);
} public DragLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
this.context = context;
} public DragLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
gestureDetector = new GestureDetectorCompat(context,
new YScrollDetector());
dragHelper = ViewDragHelper.create(this, dragHelperCallback);
} class YScrollDetector extends SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float dx,
float dy) {
return Math.abs(dy) <= Math.abs(dx);
}
} private ViewDragHelper.Callback dragHelperCallback = new ViewDragHelper.Callback() { @Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
if (mainLeft + dx < 0) {
return 0;
} else if (mainLeft + dx > range) {
return range;
} else {
return left;
}
} @Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
} @Override
public int getViewHorizontalDragRange(View child) {
return width;
} @Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
if (xvel > 0) {
open();
} else if (xvel < 0) {
close();
} else if (releasedChild == vg_main && mainLeft > range * 0.3) {
open();
} else if (releasedChild == vg_left && mainLeft > range * 0.7) {
open();
} else {
close();
}
} @Override
public void onViewPositionChanged(View changedView, int left, int top,
int dx, int dy) {
if (changedView == vg_main) {
mainLeft = left;
} else {
mainLeft = mainLeft + left;
}
if (mainLeft < 0) {
mainLeft = 0;
} else if (mainLeft > range) {
mainLeft = range;
} if (isShowShadow) {
iv_shadow.layout(mainLeft, 0, mainLeft + width, height);
}
if (changedView == vg_left) {
vg_left.layout(0, 0, width, height);
vg_main.layout(mainLeft, 0, mainLeft + width, height);
} dispatchDragEvent(mainLeft);
}
}; public interface DragListener {
public void onOpen(); public void onClose(); public void onDrag(float percent);
} public void setDragListener(DragListener dragListener) {
this.dragListener = dragListener;
} @Override
protected void onFinishInflate() {
super.onFinishInflate();
if (isShowShadow) {
iv_shadow = new ImageView(context);
iv_shadow.setImageResource(R.drawable.shadow);
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
addView(iv_shadow, 1, lp);
}
vg_left = (RelativeLayout) getChildAt(0);
vg_main = (MyRelativeLayout) getChildAt(isShowShadow ? 2 : 1);
vg_main.setDragLayout(this);
vg_left.setClickable(true);
vg_main.setClickable(true);
} public ViewGroup getVg_main() {
return vg_main;
} public ViewGroup getVg_left() {
return vg_left;
} @Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = vg_left.getMeasuredWidth();
height = vg_left.getMeasuredHeight();
range = (int) (width * 0.6f);
} @Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
vg_left.layout(0, 0, width, height);
vg_main.layout(mainLeft, 0, mainLeft + width, height);
} @Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return dragHelper.shouldInterceptTouchEvent(ev)
&& gestureDetector.onTouchEvent(ev);
} @Override
public boolean onTouchEvent(MotionEvent e) {
try {
dragHelper.processTouchEvent(e);
} catch (Exception ex) {
ex.printStackTrace();
}
return false;
} private void dispatchDragEvent(int mainLeft) {
if (dragListener == null) {
return;
}
float percent = mainLeft / (float) range;
animateView(percent);
dragListener.onDrag(percent);
Status lastStatus = status;
if (lastStatus != getStatus() && status == Status.Close) {
dragListener.onClose();
} else if (lastStatus != getStatus() && status == Status.Open) {
dragListener.onOpen();
}
} private void animateView(float percent) {
float f1 = 1 - percent * 0.3f;
ViewHelper.setScaleX(vg_main, f1);
ViewHelper.setScaleY(vg_main, f1);
ViewHelper.setTranslationX(vg_left, -vg_left.getWidth() / 2.3f
+ vg_left.getWidth() / 2.3f * percent);
ViewHelper.setScaleX(vg_left, 0.5f + 0.5f * percent);
ViewHelper.setScaleY(vg_left, 0.5f + 0.5f * percent);
ViewHelper.setAlpha(vg_left, percent);
if (isShowShadow) {
ViewHelper.setScaleX(iv_shadow, f1 * 1.4f * (1 - percent * 0.12f));
ViewHelper.setScaleY(iv_shadow, f1 * 1.85f * (1 - percent * 0.12f));
}
getBackground().setColorFilter(
evaluate(percent, Color.BLACK, Color.TRANSPARENT),
Mode.SRC_OVER);
} private Integer evaluate(float fraction, Object startValue, Integer endValue) {
int startInt = (Integer) startValue;
int startA = (startInt >> 24) & 0xff;
int startR = (startInt >> 16) & 0xff;
int startG = (startInt >> 8) & 0xff;
int startB = startInt & 0xff;
int endInt = (Integer) endValue;
int endA = (endInt >> 24) & 0xff;
int endR = (endInt >> 16) & 0xff;
int endG = (endInt >> 8) & 0xff;
int endB = endInt & 0xff;
return (int) ((startA + (int) (fraction * (endA - startA))) << 24)
| (int) ((startR + (int) (fraction * (endR - startR))) << 16)
| (int) ((startG + (int) (fraction * (endG - startG))) << 8)
| (int) ((startB + (int) (fraction * (endB - startB))));
} @Override
public void computeScroll() {
if (dragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} public enum Status {
Drag, Open, Close
} public Status getStatus() {
if (mainLeft == 0) {
status = Status.Close;
} else if (mainLeft == range) {
status = Status.Open;
} else {
status = Status.Drag;
}
return status;
} public void open() {
open(true);
} public void open(boolean animate) {
if (animate) {
if (dragHelper.smoothSlideViewTo(vg_main, range, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
vg_main.layout(range, 0, range * 2, height);
dispatchDragEvent(range);
}
} public void close() {
close(true);
} public void close(boolean animate) {
if (animate) {
if (dragHelper.smoothSlideViewTo(vg_main, 0, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
vg_main.layout(0, 0, width, height);
dispatchDragEvent(0);
}
} }
MainActivity
package cn.edu.rjxy.activity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import cn.edu.rjxy.activity.DragLayout.DragListener; import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast; public class MainActivity extends Activity { /** 左边侧滑菜单 */
private DragLayout mDragLayout;
private ListView menuListView;// 菜单列表
private ImageButton menuSettingBtn;// 菜单呼出按钮
private LinearLayout menu_header;
private TextView menu_setting; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); menu_setting=(TextView) this.findViewById(R.id.tv_setting);
menu_header = (LinearLayout) this.findViewById(R.id.menu_header);
/**
* 如果需要在别的Activity界面中也实现侧滑菜单效果,需要在布局中引入DragLayout(同本Activity方式),
* 然后在onCreate中声明使用; Activity界面部分,需要包裹在MyRelativeLayout中.
*/
mDragLayout = (DragLayout) findViewById(R.id.dl);
mDragLayout.setDragListener(new DragListener() {// 动作监听
@Override
public void onOpen() {
} @Override
public void onClose() {
} @Override
public void onDrag(float percent) { }
}); // 生成测试菜单选项数据
List<Map<String, Object>> data = getMenuData(); menuListView = (ListView) findViewById(R.id.lv);
menuListView.setAdapter(new SimpleAdapter(this, data,
R.layout.menulist_item_text, new String[] { "item", "image" },
new int[] { R.id.menu_text, R.id.menu_imageView1 })); // 添加监听,可点击呼出菜单
menuSettingBtn = (ImageButton) findViewById(R.id.menu_imgbtn);
menuSettingBtn.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
// TODO Auto-generated method stub
mDragLayout.open();
}
});
initResideListener();// 自定义添加的东东 } private void initResideListener() {
// TODO Auto-generated method stub
// 点击个人中心
menu_header.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "进入个人中心界面", Toast.LENGTH_LONG).show();
}
});
// 点击子菜单选项
menuListView.setOnItemClickListener(new OnItemClickListener() { @Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// TODO Auto-generated method stub
switch (position) {
case 0:
Toast.makeText(MainActivity.this, "0", Toast.LENGTH_LONG).show();
break;
case 1:
Toast.makeText(MainActivity.this, "1", Toast.LENGTH_LONG).show();
break;
case 2:
Toast.makeText(MainActivity.this, "2", Toast.LENGTH_LONG).show();
break;
case 3:
Toast.makeText(MainActivity.this, "3", Toast.LENGTH_LONG).show();
break;
case 4:
Toast.makeText(MainActivity.this, "4", Toast.LENGTH_LONG).show();
break;
case 5:
Toast.makeText(MainActivity.this, "5", Toast.LENGTH_LONG).show();
break;
default:
break;
}
}
});
//进入设置界面
menu_setting.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "进入设置界面", Toast.LENGTH_LONG).show();
}
}); } private List<Map<String, Object>> getMenuData() {
// TODO Auto-generated method stub
List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
Map<String, Object> item; item = new HashMap<String, Object>();
item.put("item", "需参加会议");
item.put("image", R.drawable.ic_launcher);
data.add(item); item = new HashMap<String, Object>();
item.put("item", "已参加会议");
item.put("image", R.drawable.ic_launcher);
data.add(item); item = new HashMap<String, Object>();
item.put("item", "个人信息完善");
item.put("image", R.drawable.ic_launcher);
data.add(item); item = new HashMap<String, Object>();
item.put("item", "密码修改");
item.put("image", R.drawable.ic_launcher);
data.add(item); return data;
}
}

Android之侧滑导航栏的更多相关文章

  1. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  2. android MIPI屏 导航栏丢失

    /**************************************************************************** * android MIPI屏 导航栏丢失 ...

  3. Android 修改底部导航栏navigationbar的颜色

    Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...

  4. Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

    通过前几篇文章,我们对Android的导航栏有了一定的了解认识,本次文章将对Toolbar进行综合应用,主要结合DrawerLayout.ViewPager.PagerSlidingTabStrip一 ...

  5. Android应用-底部导航栏的使用

    目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...

  6. 【转】Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  7. Android状态栏和导航栏

    1.隐藏状态栏或导航栏 View decordView = getWindow().getDecorView(); /*SYSTEM_UI_FLAG_HIDE_NAVIGATION和SYSTEM_UI ...

  8. Android之官方导航栏ActionBar

    一.ActionBar概述 ActionBar是android3.0以后新增的组件,主要用于标示应用程序以及用户所处的位置并提供相关操作以及全局的导航功能.下面我们就看看如何使用ActionBar,真 ...

  9. android之官方导航栏ActionBar(三)之高仿优酷首页

    一.问题概述 通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识.在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具 ...

随机推荐

  1. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  2. opencv学习笔记(五)----图像的形态学操作

    图像的形态学操作有基本的腐蚀和膨胀操作和其余扩展形态学变换操作(高级操作)-----开运算,闭运算,礼帽(顶帽)操作,黑帽操作...(主要也是为了去噪声,改善图像) 形态学操作都是用于处理二值图像(其 ...

  3. jquery 中 $('div','li')是什么意思?

     Javascript 专业回答   2013-07-18 10:59 这个写法没有错误,而且那个人跟你说的也没错,是选择li里面所有div 前面几位都学艺不精,都说错了 要搞清楚$('div','l ...

  4. Qt 学习之路 2(67):访问网络(3)

    Qt 学习之路 2(67):访问网络(3) 豆子 2013年11月5日 Qt 学习之路 2 16条评论 上一章我们了解了如何使用我们设计的NetWorker类实现我们所需要的网络操作.本章我们将继续完 ...

  5. 分布式中为什么要加入redis缓存的理解

    面我们介绍了mybatis自带的二级缓存,但是这个缓存是单服务器工作,无法实现分布式缓存.那么什么是分布式缓存呢?假设现在有两个服务器1和2,用户访问的时候访问了1服务器,查询后的缓存就会放在1服务器 ...

  6. 一个数字从后向前输入每一位数字,Camel和Pascal命名规范,IsValid()

    int num = int.Parse(Console.ReadLine()); ; ) { n = num % ; num /= ; Console.WriteLine(n); } Camel和Pa ...

  7. P4592 [TJOI2018]异或 (可持久化Trie)

    [题目链接] https://www.luogu.org/problemnew/show/P4592 题目描述 现在有一颗以\(1\)为根节点的由\(n\)个节点组成的树,树上每个节点上都有一个权值\ ...

  8. RabbitMQ 在Linux环境中的默认位置

    参考:https://www.rabbitmq.com/relocate.html

  9. [一首诗] Life and Death 生与死

    Life and Death 生与死 I strove with none, 我和谁都不争, for none was worth my strife, 和谁争我都不屑: Nature I loved ...

  10. HDU_2102 A计划 【BFS】

    一.题目 HDU2102 二.题意分析 该题其实就是三位空间内的BFS,但比较简单的是,它设置了传送门,可以直接传送上去,需要注意的是 1.到了传送门的时候要重新考虑传送的点的三种情况. (1)若又是 ...