仿人人网侧边栏滑动效果

提莫队长

发布于 2019-02-21 15:29:40

6680

发布于 2019-02-21 15:29:40

文章被收录于专栏：刘晓杰刘晓杰

这次的侧边栏通过scrollview和animation两种方法实现

通过scrollview实现

mysrollview.xml

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mySrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/ll_child"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
    </LinearLayout>

</HorizontalScrollView>

SideBarByScrollView.java

package com.example.sidebar;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

public class SideBarByScrollView extends Activity {
    private HorizontalScrollView mySrollView;
    private LinearLayout llLayout;

    private LayoutInflater inflater;
    private View content, menu;

    private int width, height;

    private Button showMenu;
    private boolean isShow = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mysrollview);

        mySrollView = (HorizontalScrollView) findViewById(R.id.mySrollView1);
        llLayout = (LinearLayout) findViewById(R.id.ll_child);
        inflater = getLayoutInflater();

        //去掉下面滚动条的滚动效果
        mySrollView.setHorizontalScrollBarEnabled(false);

        // 给scrollview增加监听
        mySrollView.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {
                    @Override
                    public void onGlobalLayout() {
                        // 移除子控件监听
                        llLayout.getViewTreeObserver()
                                .removeOnGlobalLayoutListener(this);

                        content = inflater.inflate(R.layout.content, null);
                        menu = inflater.inflate(R.layout.menu, null);
                        menu.setVisibility(View.GONE);//*************************

                        width = mySrollView.getWidth();
                        height = mySrollView.getHeight();

                        // scrollview支持一个子控件，这里有两个view，
                        //需要放置到另外一个布局中
                        llLayout.addView(menu, width / 2, height);
                        llLayout.addView(content, width, height);

                        showMenu = (Button)content.findViewById(R.id.btn_onCLick);
                        showMenu.setOnClickListener(new OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                if(isShow){
                                    //侧边栏已经显示
                                    mySrollView.smoothScrollBy(width/2, 0);
                                    isShow = false;
                                } else {
                                    menu.setVisibility(View.VISIBLE);//*************
                                    mySrollView.smoothScrollBy(-width/2, 0);
                                    isShow = true;
                                    //上面两行带星号的主要是为了解决初始界面已经有侧边栏的问题
                                    //如果不加，侧边栏已经显示了
                                    //（当然isShow初始值为true）
                                }
                            }
                        });
                    }
                });
    }
}

content和menu的布局如下 content.xml

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="正文" />

    <Button
        android:id="@+id/btn_onCLick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示侧边栏" />

</LinearLayout>

menu.xml

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="侧边栏" />

</LinearLayout>

演示效果

通过animation实现

myanimation.xml

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

    <LinearLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正文" />

        <Button
            android:id="@+id/btn_onCLick2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="显示侧边栏" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="侧边栏" />
    </LinearLayout>

</FrameLayout>

SideBarByAnimation.java

package com.example.sidebar;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.LinearLayout;

public class SideBarByAnimation extends Activity {
    private TranslateAnimation translate;

    private int width, height;

    private Button showMenu;
    private boolean isShow = false;

    private LinearLayout content, menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.myanimation);

        content = (LinearLayout)findViewById(R.id.ll_content);
        menu = (LinearLayout)findViewById(R.id.ll_menu);
        menu.setVisibility(View.INVISIBLE);
        showMenu = (Button)findViewById(R.id.btn_onCLick2);

        showMenu.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //获取宽高
                width = content.getWidth();
                height = content.getHeight();

                if(isShow){
                    //已有侧边栏
                    translate = new TranslateAnimation(0, -width/2, 0, 0);//移动二分之一
                    menu.setVisibility(View.INVISIBLE);
                } else {
                    translate = new TranslateAnimation(0, width/2, 0, 0);
                    menu.setVisibility(View.VISIBLE);
                }
                //TranslateAnimation构造函数里面的参数是from和to；
                //scrollview的smoothScrollBy是属于正数向左，负数向右
                translate.setDuration(1000);
                translate.setFillAfter(true);//停留在结束时候

                //连续多段动画的播放最好用这个方法
                //http://www.eoeandroid.com/thread-544820-1-1.html?_dsign=6f9d18de
                translate.setAnimationListener(new AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {}

                    @Override
                    public void onAnimationRepeat(Animation animation) {}

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        isShow = !isShow;
                        //重绘布局，使button可以响应
                        if(isShow){
                            content.layout(width/2, 0, width/2+width, height);
                        } else {
                            content.layout(0, 0, width, height);
                        }
                        content.clearAnimation();
                    }
                });
                content.startAnimation(translate);
            }
        });
    }
}

接下来主界面

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.sidebar.MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="109dp"
        android:text="侧边栏测试" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:text="scrollview" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="58dp"
        android:text="animation" />

</RelativeLayout>

MainActivity.java

package com.example.sidebar;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {
    private Button btn1, btn2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        btn1 = (Button) findViewById(R.id.button1);
        btn1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,
                        SideBarByScrollView.class));
            }
        });

        btn2 = (Button) findViewById(R.id.button2);
        btn2.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this,
                        SideBarByAnimation.class));
            }
        });
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016年04月01日，如有侵权请联系 cloudcommunity@tencent.com 删除

xml

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

xml

javascript

登录后参与评论

0 条评论

热度

仿人人网侧边栏滑动效果

仿人人网侧边栏滑动效果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐