Andriod学习笔记：仿美图秀秀首页手柄下拉功能实现（一）

前言：

现在应用关于界面的滑动一般都是左右滑动，很少需要上下滑动，一般也是通过SlideMenu或者原生的DrawerLayout，上下滑动其实也能通过此方法实现，不过对于这个效果我是用了另外两个方法实现的。

先展示一下实现的效果：





主要是运用了SlidingDrawer的原生控件。

SlidingDrawer：

SlidingDrawer隐藏屏外的内容，并允许用户通过handle以显示隐藏内容。它可以垂直或水平滑动，它有俩个View组成，其一是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须设置布局，在布局文件中必须指定handle和content。

下面是运用的布局和代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/mtxx_back_b"
android:orientation="vertical" >
<SlidingDrawer
android:id="@+id/slidingdrawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:content="@+id/content"
android:handle="@+id/handle"
android:orientation="vertical"
android:rotation="180" >
<ImageButton
android:id="@id/handle"
android:layout_width="60dip"
android:layout_height="65dip"
android:background="@drawable/tuijian_handler"
android:rotation="180"
android:src="@drawable/tuijian_handler_open"
android:translationX="-120dip" />
<LinearLayout
android:id="@id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:rotation="180" >
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center_horizontal"
android:textColor="#000000"
android:textSize="18px"
android:textStyle="bold" >
</TextView>
</LinearLayout>
</SlidingDrawer>
</LinearLayout>

把以上的布局放入线性布局中；

public class AdsActivity extends Activity {
private SlidingDrawer mDrawer;
private ImageButton imbg;
private Boolean flag = false;
private TextView tv;

@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ads);
imbg = (ImageButton) findViewById(R.id.handle);
mDrawer = (SlidingDrawer) findViewById(R.id.slidingdrawer);
tv = (TextView) findViewById(R.id.tv);
mDrawer.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener() {
@Override
public void onDrawerOpened() {
flag = true;
imbg.setImageResource(R.drawable.tuijian_handler);
imbg.setImageResource(R.drawable.tuijian_handler_close);
}
});
mDrawer.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener() {
@Override
public void onDrawerClosed() {
flag = false;
imbg.setImageResource(R.drawable.tuijian_handler);
imbg.setImageResource(R.drawable.tuijian_handler_open);
}
});
mDrawer.setOnDrawerScrollListener(new SlidingDrawer.OnDrawerScrollListener() {
@Override
public void onScrollEnded() {
tv.setText("结束拖动");
}

@Override
public void onScrollStarted() {
tv.setText("开始拖动");
}
});
}
}

最后还要注意在AndroidMainfest清单中注册Activity。

<activity
android:name="com.meituxiuxiu.AdsActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

其实网上对实现类似效果的帖子很多，代码也差不多，但是需要的效果是把下拉的手柄放在下拉布局的外面，网上普遍都会在向上滑动后留下与手柄等高的一段背景，这时需要在布局中利用了rotation（旋转）这个属性，在SlidingDrawer，ImageButton和LinearLayout控件中将这个属性设置为180，实现旋转的效果，这样就可以实现图中所示的效果了，大家可以试试；