自己实现android側滑菜单
首先,我们会用到一个控件:HorizontalScrollView 从名字我们就能够了解到。这是一种水平滑动的控件,也就是当内容大于屏幕的宽度的时候,能够左右滑动来使超出屏幕的内容显示在屏幕上。
第一步:把菜单的布局简单的写出来
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img1"
android:layout_centerVertical="true"
/> </RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img2"
android:layout_centerVertical="true"
/> </RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img3"
android:layout_centerVertical="true"
/> </RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img4"
android:layout_centerVertical="true"
/> </RelativeLayout> <RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="@+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:id="@+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"
android:layout_toRightOf="@id/img5"
android:layout_centerVertical="true"
/> </RelativeLayout>
</LinearLayout>
</RelativeLayout></span></span>
<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:14px;"><?xml version="1.0" encoding="utf-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<googleplay.xiaokai.com.qq.SlidMenu
android:id="@+id/horscrview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
android:scrollbars="none"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<include layout="@layout/left_menulayout"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"
>
</LinearLayout>
</LinearLayout>
</googleplay.xiaokai.com.qq.SlidMenu>
</LinearLayout></span>
</span>
<span style="font-size:18px;">package googleplay.xiaokai.com.qq; import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout; /**
* Created by 孙晓凯 on 2016/3/27.
*/
public class SlidMenu extends HorizontalScrollView {
int mScreenWit;//屏幕宽度
int mRightWithScr;
LinearLayout mWrap;
ViewGroup mMenu;
ViewGroup mContent;
int mMenuWidth ;
private boolean flag; public SlidMenu(Context context, AttributeSet attrs) {
super(context, attrs);
//得到屏幕的宽度
WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics metris = new DisplayMetrics();
winmana.getDefaultDisplay().getMetrics(metris);
mScreenWit = metris.widthPixels;//得到的是像素
//把50dp转换成像素
mRightWithScr = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()); } public SlidMenu(Context context) {
super(context); } @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (!flag) {
mWrap = (LinearLayout) getChildAt(0);//得到此空间中的第一个子控件
mMenu = (ViewGroup) mWrap.getChildAt(0);//得到menu
mContent = (ViewGroup) mWrap.getChildAt(1);//得到内容控件 mMenuWidth = mMenu.getLayoutParams().width = mScreenWit - mRightWithScr;//側滑菜单的宽度为屏幕宽度减去50dp
mContent.getLayoutParams().width = mScreenWit;//设置内容控件宽度
flag = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} /*
实现的功能是将menu隐藏,通过设置偏移量
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) { if(changed) {
this.scrollTo(mMenuWidth, 0);//向左移动
}
super.onLayout(changed, l, t, r, b);
} @Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action){
case MotionEvent.ACTION_UP:
int scx = getScrollX(); //就是当前view的左上角相对于母视图的左上角的X轴偏移量
if(scx>=mMenuWidth/2){
this.smoothScrollTo(mMenuWidth,0);
}else{
this.smoothScrollTo(0,0);
}
return true;
}
return super.onTouchEvent(ev);
}
}</span>
<span style="font-size:18px;"><? xml version="1.0" encoding="utf-8"? >
<resources>
<declare-styleable name="SlidMenu">
<attr name="RithtPadding" format="dimension">
</attr>
</declare-styleable>
</resources>
RithtPadding就是自己定义的属性的名称;
<?xml version="1.0" encoding="utf-8"? >
<LinearLayout
xmlns:my="http://schemas.android.com/apk/res-auto" <!--注意。要使用自己的命名空间--!>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<googleplay.xiaokai.com.qq.SlidMenu
android:id="@+id/horscrview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/img_frame_background"
android:scrollbars="none"
my:RithtPadding="100dp" <!--自己定义的控件--!>
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<include layout="@layout/left_menulayout"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/qq"
>
</LinearLayout>
</LinearLayout>
</googleplay.xiaokai.com.qq.SlidMenu>
</LinearLayout></span>
<span style="font-size:18px;">public SlidMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//得到屏幕的宽度
WindowManager winmana = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);
DisplayMetrics metris = new DisplayMetrics();
winmana.getDefaultDisplay().getMetrics(metris);
mScreenWit = metris.widthPixels;//得到的是像素 <span style="color:#3366ff;">TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidMenu,defStyleAttr,0);
int n = array.getIndexCount();
for(int i=0;i<n;i++){
int attr = array.getIndex(i);
switch (attr){
case R.styleable.SlidMenu_RithtPadding:
mRightWithScr = array.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));
break;
}
}
array.recycle();//</span>
}</span>
<span style="font-size:18px;">/*
打开菜单
*/
public void openMenu(){
if(isOpen)return;
else {
this.smoothScrollTo(0,0);//打开
isOpen = true;
}
} /*
关闭菜单
*/
public void closeMenu(){
if(!isOpen){
return ;
}else{
this.smoothScrollTo(mMenuWidth,0);
isOpen = false;
}
} /*
切换菜单
*/
public void toggle(){
if(isOpen){
closeMenu();
}else{
openMenu();
}
}</span>
<span style="font-size:18px;">public class MainActivity extends AppCompatActivity {
private SlidMenu slidmenu; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);<span style="font-family: Arial, Helvetica, sans-serif;">//</span><span style="font-family: Arial, Helvetica, sans-serif;">假设继承的是ActionBarActivity或者是AppCompatActivity就会报错,</span><span style="font-family: Arial, Helvetica, sans-serif;">假设你执意要用这种方法,请继承Activity。</span>
// 假设你继承的是AppCompatActivity或ActionBarActivity请调用以下的方法取代上面的方法
// supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
slidmenu = (SlidMenu) findViewById(R.id.horscrview);
}
public void toggle(View view){
slidmenu.toggle();
} }
</span>
<span style="font-size:18px;">/**
* 滚动发生时
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt)
{
super.onScrollChanged(l, t, oldl, oldt); /**
* 差别1:内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale
*
* 差别2:菜单的偏移量须要改动
*
* 差别3:菜单的显示时有缩放以及透明度变化 缩放:0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0
* 0.6+ 0.4 * (1- scale) ;
*
*/
float rightScale = 0.7f + 0.3f * scale;
float leftScale = 1.0f - scale * 0.3f;
float leftAlpha = 0.6f + 0.4f * (1 - scale); // 调用属性动画。设置TranslationX
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f); ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, leftAlpha);
// 设置content的缩放的中心点
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale); }</span>
图:
想要源代码的同学,这是源代码地址:https://github.com/anxiaokai/seslidmenu.git
參考资料:慕课网
自己实现android側滑菜单的更多相关文章
- android側滑菜单-DrawerLayout的基本使用
眼下主流App开发中,部分是以側滑菜单为主布局架构,曾经做android側滑菜单时.大多选择使用github上的第三方开源框架SildingMenu,可是这个框架还是稍显笨重.好消息是google已经 ...
- Android 使用DrawerLayout高速实现側滑菜单
一.概述 DrawerLayout是一个能够方便的实现Android側滑菜单的组件,我近期开发的项目中也有一个側滑菜单的功能.于是DrawerLayout就派上用场了.假设你从未使用过DrawerLa ...
- Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码
Android 高仿QQ5.2双向側滑菜单DrawerLayout实现源代码 左右側滑效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a ...
- Android 实现形态各异的双向側滑菜单 自己定义控件来袭
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39670935.本文出自:[张鸿洋的博客] 1.概述 关于自己定义控件側滑已经写了 ...
- android:QQ多种側滑菜单的实现
在这篇文章中写了 自己定义HorizontalScrollView实现qq側滑菜单 然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样 第一种效果 另外一种效果 第三种效果 ...
- iOS分组通讯录效果+側滑菜单(MMDrawerController)
前言的废话-能够忽略 自从学会了使用Cocoapod,就欲罢不能了!由于太简单太赞了,不用再把源代码粘到project里了! 參见戴维营博客中的解说:Cocoapod 安装以及使用 先上一下效果图,请 ...
- 高仿QQ6.0側滑菜单之滑动优化(二)
好了,昨天已经实现了高仿QQ6.0的側滑大致框架.如有兴趣.能够去看下仿QQ6.0側滑之ViewDragHelper的使用(一) 可是之前的实现.仅仅是简单的能够显示和隐藏左側的菜单,可是特别生硬,并 ...
- 【GitHub-SwipeMenuListView】针对ListView item的側滑菜单
项目地址:https://github.com/baoyongzhang/SwipeMenuListView Usage Step 1:import swipemenulistview.jar Ste ...
- 高仿QQ6.0之側滑删除
前两天已经完毕了高仿QQ6.0側滑和优化,今天来看下側滑删除的实现吧,假设有兴趣,能够去看下之前的两篇,仿QQ6.0側滑之ViewDragHelper的使用(一)和高仿QQ6.0側滑菜单之滑动优化(二 ...
随机推荐
- MSSQL:账号无法删除方案
1.查询 EXEC sp_who 'WIN-GBKBCVTG4CN\Administrator' 返回一个表格,其中有列[spid] 2.删除 kill spid
- [BZOJ1821][JSOI2010]部落划分
感觉学了这么久还是有那么一丢丢进步的...上个学期看到这道题,虽然早就学过并查集和二分了但还是一点思路都没有,现在可以秒切了呢 思路就是二分+并查集,有些人说是生成树,其实它没有变成树,只是运用了生成 ...
- windows phone数据网络开发
LINQ LINQ的全称是Language INtegrated Query,即语言集成查询.LINQ是一种查询语言,不仅可以对数字库进行查询,还可以对.net的数据集.数组.Xml文档等对象进行查询 ...
- Django学习案例一(blog):五. 开发主页(博客列表展示)
主页是一个“博客列表”页.博客要按发布时间的倒序来排列,每个博客都要包含标题.作者.分类.发布时间的显示(年-月-日 时:分)及节选的正文内容(前 100 个字).点击单独的博客可以进入其详情页. 1 ...
- C# 根据空格数截取
#region --根据空格数截取 ; ; //循环截取 , }; while (!sr.EndOfStream) { ; i < strTest.Length - ; i++) { ).Tri ...
- swiper和Navigator组件
<swiper class="index-banner" indicator-dots="{{true}}" autoplay="{{true} ...
- java实现简单窗体小游戏----球球大作战
java实现简单窗体小游戏----球球大作战需求分析1.分析小球的属性: 坐标.大小.颜色.方向.速度 2.抽象类:Ball 设计类:BallMain—创建窗体 BallJPanel—画小 ...
- 通过yum仓库安装mysql
1,下载安装包wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm2,安装mysql源yum -y ins ...
- freemarker使用map替换字符串中的值demo2
package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringWr ...
- matlab 读取输入数组
In an assignment A(I) = B, the number of elements in B and I must be the same MATLAB:index_assign_el ...