页面侧滑栏效果

效果图:使用侧滑栏属性将两个页面组合起来,显示侧滑效果

首先:设置左边页面的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

<RelativeLayout
        android:id="@+id/left_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_marginTop="50dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="版本升级"
            android:layout_centerVertical="true"
            android:textSize="20sp"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#5353"/>
    <RelativeLayout
        android:id="@+id/left_clear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缓存清理"
            android:layout_centerVertical="true"
            android:textSize="20sp"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#5353"/>
    <RelativeLayout
        android:id="@+id/left_lixian"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="离线下载"
            android:layout_centerVertical="true"
            android:textSize="20sp"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#5353"/>
    <RelativeLayout
        android:id="@+id/left_about"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关于"
            android:layout_centerVertical="true"
            android:textSize="20sp"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#5353"/>
    <RelativeLayout
        android:id="@+id/left_day"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="夜间模式"
            android:layout_centerVertical="true"
            android:textSize="20sp"/>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#5353"/>

</LinearLayout>

然后主页面的布局:

其次在设置一下侧滑时候的,左右面显示的宽度大小:

最后设置activity: ,使得左边页面加入,实现侧滑效果;

package com.example.administrator.mymenu;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    //声明控件(主页面)
    private Button left;
    //声明侧滑兰
    private SlidingMenu menu;
    //声明子布局控件
    private RelativeLayout left_update;
    private RelativeLayout left_clear;
    private RelativeLayout left_lixian;
    private RelativeLayout left_about;
    private RelativeLayout left_day;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //绑定id
        left = (Button) findViewById(R.id.btn);
        left.setOnClickListener(this);
        slidingMenu();

}

private void slidingMenu() {
        //初始化侧滑栏
        menu=new SlidingMenu(this);
        //设置类型
        menu.setMode(SlidingMenu.LEFT);
        //设置触屏模式
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        //设置阴影宽度
        menu.setShadowWidthRes(R.dimen.shadow_width);
        //滑动主页面剩余宽度
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        //设置渐变效果
        menu.setFadeDegree(0.4f);
        //加载到当前activity
        menu.attachToActivity(this,SlidingMenu.SLIDING_CONTENT);
        //加载左侧布局
        View view= LinearLayout.inflate(this,R.layout.leftment_activity,null);
        menu.setMenu(view);
        //绑定id
        left_update = (RelativeLayout) findViewById(R.id.left_update);
        left_clear = (RelativeLayout) findViewById(R.id.left_clear);
        left_lixian = (RelativeLayout) findViewById(R.id.left_lixian);
        left_about = (RelativeLayout) findViewById(R.id.left_about);
        left_day = (RelativeLayout) findViewById(R.id.left_day);
        //设置监听
        left_update.setOnClickListener(this);
        left_clear.setOnClickListener(this);
        left_lixian.setOnClickListener(this);
        left_about.setOnClickListener(this);
        left_day.setOnClickListener(this);
    }

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn:
                menu.toggle();//点击按钮切换到侧滑页

break;
            case R.id.left_update:
                Toast.makeText(this,"版本升级",Toast.LENGTH_SHORT).show();

break;
            case R.id.left_clear:
                Toast.makeText(this,"缓存清理",Toast.LENGTH_SHORT).show();
                break;
            case R.id.left_lixian:
                Toast.makeText(this,"离线下载",Toast.LENGTH_SHORT).show();
                break;
            case R.id.left_about:
                Toast.makeText(this,"关于",Toast.LENGTH_SHORT).show();
                break;
            case R.id.left_day:
                Toast.makeText(this,"夜间模式",Toast.LENGTH_SHORT).show();
                break;

}
    }
}

时间: 2024-10-14 01:21:10

页面侧滑栏效果的相关文章

侧滑栏效果的实现

效果 源码 https://github.com/YouXianMing/iOS-Project-Examples 中的 SideViewController // // ViewController.m // SideViewController // // Created by YouXianMing on 16/6/6. // Copyright © 2016年 YouXianMing. All rights reserved. // #import "ViewController.h&q

android5.0多种侧滑栏效果

1.普通侧滑 效果图: 思路:通过自定义View继承HorizontalScrollView,然后重写onMeasure(),onLayout(),onTouchEvent() 方法并设置menu(通过动画使menu开始时处于隐藏状态)布局和content布局.(注意:使用ViewHelper类需要导入nineoldandroids-2.4.0.jar包) menu(left_menu)布局代码: <?xml version="1.0" encoding="utf-8&

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

【FastDev4Android框架开发】打造QQ6.X最新版本侧滑界面效果(三十八)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: 这两天QQ进行了重大更新(6.X)尤其在UI风格上面由之前的蓝色换成了白色居多了,侧滑效果也发生了一些变化,那我们今天来模仿实现一个QQ6.X版本的侧滑界面效果.今天我们还是采用神器ViewDragHelper来实现,之前我们以前基于ViewDragHelper的使用和打造QQ5.X效果了,基本使用方法可以点

【Android界面实现】使用ActionBar和DrawerLayout纯原生控件,实现侧滑栏和滑动Tab界面

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在前面的文章中,我们使用第三方开源控件,比如说是SlidingMenu和PagerSlidingTabStrip,实现过侧滑栏和滑动Tab界面.但是在support-v4包中,提供了原生的侧滑栏控件DrawerLayout,而滑动的Tab效果,我们可以使用ViewPager和ActionBar上的Tab来进行实现.所以在今天的文章里面,我们将介绍如何将DrawerLayout与ActionBar进行整合,

使用slidingMenu实现简单的侧滑栏

首先要感谢各位国内外大神无私奉献的精神 最近APP需要做一个侧滑栏,查阅了一些资料后发现使用SlidingMenuS实现比较简单,这里做下笔记,方便以后有需要方便使用. (1)准备资源项目: 首先去https://github.com/jfeinstein10/SlidingMenu(SlidingMenu在GitHub的下载地址)下载资源项目.然后去 https://github.com/JakeWharton/ActionBarSherlock下载ActionBarSherlock资源项目,

闹钟AlarmAndMusic 滑动调整时间和页面旋转风车效果《IT蓝豹》

闹钟AlarmAndMusic 滑动调整时间和页面旋转风车效果 闹钟AlarmAndMusic 和支持播放音乐效果的,上下滑动调整时间和页面旋转风车效果,由于制作的gif有些问题,效果不明显,欢迎下载使用看看真实的效果.本例子主要由AlertActivity和AlarmService和AlarmAlertWakeLock三个类完成.AlarmAlertWakeLock主要代码:public class AlarmAlertWakeLock {    private static PowerMan

ViewDragHelper详解(侧滑栏)

乐观是一首激昂优美的进行曲,时刻鼓舞着你向事业的大路勇猛前进.--大仲马 一.概述 Drag拖拽:ViewDrag拖拽视图,拖拽控件:ViewDragHelper拖拽视图助手,拖拽操作类.利用ViewDragHelper类可以实现很多绚丽的效果,比如:拖拽删除,拖拽排序,侧滑栏等.本篇主要讲解简易侧滑栏的实现. 注意:ViewDragHelper是作用在一个ViewGroup上,也就是说他不能直接作用到被拖拽的控件view上, 因为控件的位置是由父控件决定的. 最终效果效果图: 二.相关概念 1

太赞了!超炫的页面切换动画效果【附源码下载】

今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. CSS 动画根据它们的实现的效果分为不同的组.为展示