仿人人网侧边栏滑动效果
这次的侧边栏通过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));
}
});
}
}