1. 首页
  2. 编程与技术

基于Android实现仿QQ5.0侧滑

发布于 2016-05-07 22:34:25 | 123 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Android移动端操作系统

Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。

本课程将带领大家通过自定义控件实现QQ5.0侧滑菜单，课程将循序渐进，首先实现最普通的侧滑菜单，然后引入属性动画与拖动菜单效果相结合，最终实现QQ5.0侧滑菜单效果。通过本课程大家会对侧滑菜单有更深层次的了解，通过自定义控件和属性动画打造千变万化的侧滑菜单效果

本课程将带领大家通过自定义控件实现QQ5.0侧滑菜单，课程将循序渐进，首先实现最普通的侧滑菜单，然后引入属性动画与拖动菜单效果相结合，最终实现QQ5.0侧滑菜单效果。通过本课程大家会对侧滑菜单有更深层次的了解，通过自定义控件和属性动画打造千变万化的侧滑菜单效果

效果图如下所示：


package com.example;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
public class MainActivity extends ActionBarActivity {
  private SlidingMenu mMenu;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mMenu = (SlidingMenu) findViewById(R.id.id_menu);
  }
  public void toggleMenu(View view)
  {
    mMenu.toggle();
  }
} 
package com.example;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Rect;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
/**
 * Created by tuhao-pc on 2015/12/28.
 * 获取屏幕相关的辅助类
 */
public class ScreenUtils {
  private ScreenUtils() {
  }
  /**
   *获取屏幕的高度
   * @param context
   * @return
   */
  public static int getScreenWidth(Context context){
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics outMetrics = new DisplayMetrics();
    wm.getDefaultDisplay().getMetrics(outMetrics);
    return outMetrics.widthPixels;
  }
  /**
   * 获取屏幕的高度
   * @param context
   * @return
   */
  public static int getScreenHeight(Context context){
    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics outMetrics = new DisplayMetrics();
    wm.getDefaultDisplay().getMetrics(outMetrics);
    return outMetrics.heightPixels;
  }
  /**
   * 获取手机状态栏的状态
   * @param context
   * @return
   */
  public static int getStatusHeight(Context context){
    int statusHeight = -1;
    Class<?> clazz = null;
    try {
      clazz = Class.forName("com.android.internal.R$dimen");
      Object object = clazz.newInstance();
      int height = Integer.parseInt(clazz.getField("status_bar_height").get(object).toString());
      statusHeight = context.getResources().getDimensionPixelSize(height);
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } catch (NoSuchFieldException e) {
      e.printStackTrace();
    } catch (InstantiationException e) {
      e.printStackTrace();
    } catch (IllegalAccessException e) {
      e.printStackTrace();
    }
    return statusHeight;
  }
  /**
   * 获取当前屏幕截图，包含状态栏
   *
   * @param activity
   * @return
   */
  public static Bitmap snapShotWithStatusBar(Activity activity)
  {
    View view = activity.getWindow().getDecorView();
    view.setDrawingCacheEnabled(true);
    view.buildDrawingCache();
    Bitmap bmp = view.getDrawingCache();
    int width = getScreenWidth(activity);
    int height = getScreenHeight(activity);
    Bitmap bp = null;
    bp = Bitmap.createBitmap(bmp, 0, 0, width, height);
    view.destroyDrawingCache();
    return bp;
  }
  /**
   * 获取当前屏幕截图，不包含状态栏
   *
   * @param activity
   * @return
   */
  public static Bitmap snapShotWithoutStatusBar(Activity activity)
  {
    View view = activity.getWindow().getDecorView();
    view.setDrawingCacheEnabled(true);
    view.buildDrawingCache();
    Bitmap bmp = view.getDrawingCache();
    Rect frame = new Rect();
    activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
    int statusBarHeight = frame.top;
    int width = getScreenWidth(activity);
    int height = getScreenHeight(activity);
    Bitmap bp = null;
    bp = Bitmap.createBitmap(bmp, 0, statusBarHeight, width, height
        - statusBarHeight);
    view.destroyDrawingCache();
    return bp;
  }
} 
package com.example;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import com.nineoldandroids.view.ViewHelper;
/**
 * Created by tuhao-pc on 2015/12/28.
 */
public class SlidingMenu extends HorizontalScrollView{
  private int mScreenWidth;
  private int mMenuRightPadding;
  private int mMenuWidth;
  private int mHalfMenuWidth;
  private boolean isOpen;
  private boolean once;
  private ViewGroup mMenu;
  private ViewGroup mContent;
  public SlidingMenu(Context context) {
    this(context,null);
  }
  public SlidingMenu(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }
  public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mScreenWidth = ScreenUtils.getScreenWidth(context);
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs,R.styleable.SlidingMenu,defStyleAttr,0);
    int count = a.getIndexCount();
    for(int i = 0;i < count;i++){
      int attr = a.getIndex(i);
      switch (attr){
        case R.styleable.SlidingMenu_rightPadding:{
//          默认是50
          mMenuRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50f,getResources().getDisplayMetrics()));
          break;
        }
      }
    }
    a.recycle();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    /**
     * 显示设置一个宽度
     */
    if(!once){
      LinearLayout wrapper = (LinearLayout) getChildAt(0);
      mMenu = (ViewGroup) wrapper.getChildAt(0);
      mContent = (ViewGroup) wrapper.getChildAt(1);
      mMenuWidth = mScreenWidth - mMenuRightPadding;
      mHalfMenuWidth = mMenuWidth/2;
      mMenu.getLayoutParams().width = mMenuWidth;
      mContent.getLayoutParams().width = mScreenWidth;
    }
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    if(changed) {
//      将菜单隐藏
      this.scrollTo(mMenuWidth, 0);
      once = true;
    }
  }
  @Override
  public boolean onTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action){
      // Up时，进行判断，如果显示区域大于菜单宽度一半则完全显示，否则隐藏
      case MotionEvent.ACTION_UP:{
        int scrollX = getScrollX();
        if(scrollX > mHalfMenuWidth){
          this.smoothScrollTo(mMenuWidth,0);
          isOpen = false;
        }
        else{
          this.smoothScrollTo(0,0);
          isOpen = true;
        }
        return true;
      }
    }
    return super.onTouchEvent(ev);
  }
  /**
   * 打开菜单
   */
  public void openMenu()
  {
    if (isOpen)
      return;
    this.smoothScrollTo(0, 0);
    isOpen = true;
  }
  /**
   * 关闭菜单
   */
  public void closeMenu()
  {
    if (isOpen)
    {
      this.smoothScrollTo(mMenuWidth, 0);
      isOpen = false;
    }
  }
  /**
   * 切换菜单状态
   */
  public void toggle()
  {
    if (isOpen)
    {
      closeMenu();
    } else
    {
      openMenu();
    }
  }
  @Override
  protected void onScrollChanged(int l, int t, int oldl, int oldt)
  {
    super.onScrollChanged(l, t, oldl, oldt);
    float scale = l * 1.0f / mMenuWidth;
    float leftScale = 1 - 0.3f * scale;
    float rightScale = 0.8f + scale * 0.2f;
    ViewHelper.setScaleX(mMenu, leftScale);
    ViewHelper.setScaleY(mMenu, leftScale);
    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
    ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.7f);
    ViewHelper.setPivotX(mContent, 0);
    ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
    ViewHelper.setScaleX(mContent, rightScale);
    ViewHelper.setScaleY(mContent, rightScale);
  }
}

布局文件和资源文件（xml）


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tu = "http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.example.SlidingMenu
    android:id="@+id/id_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/img_frame_background"
    tu:rightPadding="20dp">
    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="fill_parent"
      android:orientation="horizontal" >
      <include layout="@layout/layout_menu" />
      <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@mipmap/qq" >
        <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:onClick="toggleMenu"
          android:text="切换菜单" />
      </LinearLayout>
    </LinearLayout>
  </com.example.SlidingMenu>
</LinearLayout> 
<?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:background="#0000" >
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:orientation="vertical" >
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <ImageView
        android:id="@+id/one"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/img_1" />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/one"
        android:text="第1个Item"
        android:textColor="#f0f0f0"
        android:textSize="20sp" />
    </RelativeLayout>
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <ImageView
        android:id="@+id/two"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/img_2" />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/two"
        android:text="第2个Item"
        android:textColor="#f0f0f0"
        android:textSize="20sp" />
    </RelativeLayout>
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <ImageView
        android:id="@+id/three"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/img_3" />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/three"
        android:text="第3个Item"
        android:textColor="#f0f0f0"
        android:textSize="20sp" />
    </RelativeLayout>
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <ImageView
        android:id="@+id/four"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/img_4" />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/four"
        android:text="第一个Item"
        android:textColor="#f0f0f0"
        android:textSize="20sp" />
    </RelativeLayout>
    <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
      <ImageView
        android:id="@+id/five"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:src="@mipmap/img_5" />
      <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/five"
        android:text="第5个Item"
        android:textColor="#f0f0f0"
        android:textSize="20sp" />
    </RelativeLayout>
  </LinearLayout>
</RelativeLayout>


最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务