android侧滑和下拉刷新简单实现原理,基于margin属性

来源:互联网 发布:linux sublime tarbz2 编辑:程序博客网 时间:2024/05/17 22:14

现在越来越多的安卓应用都引用了侧滑功能,他能使本来就很小的屏幕展示了很多的内容,当然了这不是一下子都加载出来,而是通过我们手指的滑动来决定侧滑菜单是显示还是隐藏,下拉刷新的功能更是常见,几乎是所有的手机应用都必须的,这篇文章主要是简单介绍一下原理,这里主要参考了郭林的博客,郭林真的是一位牛人,这是他的博客地址:http://blog.csdn.net/sinyu890807/。

其实侧滑和下拉刷新的实现都是基于都一个原理,就是不断改变margin的值,比如我们要做android的侧滑(菜单隐藏在屏幕左侧),首先是在我们的布局文件中,写好两个布局,其中一个是菜单布局,一个是内容布局,下面是示例代码

<LinearLayout 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"    android:orientation="horizontal" >    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:id="@+id/menu"        android:background="#FF8800" >        <ImageView             android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/ic_launcher"            android:scaleType="fitXY"            />            </LinearLayout>    <LinearLayout        android:layout_width="fill_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:id="@+id/content"        android:gravity="center">        <Button             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:id="@+id/pullrefesh"            android:text="跳转到下拉刷新界面"            />    </LinearLayout></LinearLayout>

其中button是跳转到下拉刷新示例界面,这里先不要管他。可以看出在主布局LinearLayout中有两个LinearLayout子布局,分别是代表了菜单和内容,当然了,这里我们必须要对以上布局初始化,比如说要把菜单隐藏掉,把内容布局充分显示在屏幕中。

public class MainActivity extends Activity  implements OnTouchListener{private LinearLayout menu; //菜单布局private LinearLayout content;//主布局private Context context;//上下文private int screenWidth;  //屏幕宽度private int menuPadding =  300; //Menu完全显示时留给content的宽度private LinearLayout.LayoutParams menuParams; private int  leftEdge; //menu完全隐藏时 距离屏幕距离private int rightEdge = 0; private float xDown; //手指按下时x轴的坐标private float xMove;// 手指在x轴移动坐标private float xUp;//手指抬起时候的X坐标private boolean isMenuVisible;  //菜单是否在显示private Button pullrefesh;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);context = this;menu  = (LinearLayout) this.findViewById(R.id.menu);content  = (LinearLayout) this.findViewById(R.id.content);pullrefesh  = (Button) this.findViewById(R.id.pullrefesh);pullrefesh.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Intent freshen =  new Intent(context, PullFreshenActivity.class);startActivity(freshen);}});initLayout();content.setOnTouchListener(this);}/** * 初始化布局 */private void initLayout() {WindowManager window = (WindowManager) getSystemService(Context.WINDOW_SERVICE);screenWidth  = window.getDefaultDisplay().getWidth();menuParams  = (LinearLayout.LayoutParams) menu.getLayoutParams();menuParams.width = screenWidth - menuPadding;leftEdge = - menuParams.width;menuParams.leftMargin = leftEdge;content.getLayoutParams().width = screenWidth;}@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:xDown = event.getRawX();break;case MotionEvent.ACTION_MOVE:xMove = event.getRawX();int distanceX = (int) (xMove - xDown);  if(isMenuVisible){}else{menuParams.leftMargin  = leftEdge + distanceX;}//menu不能滑出边界if(menuParams.leftMargin > rightEdge){menuParams.leftMargin  = rightEdge;}else if(menuParams.leftMargin < leftEdge){menuParams.leftMargin  = leftEdge;}menu.setLayoutParams(menuParams);break;case MotionEvent.ACTION_UP:xUp = event.getRawX();//用户是要显示菜单if(xUp - xDown > 0 && !isMenuVisible){new Mytask().execute(30);}else if(xUp - xDown < 0 && isMenuVisible){  //用户想要隐藏菜单new Mytask().execute(-30);}break;default:break;}return true;}/** * 使菜单能有一个渐变效果 * @author c_fei * */class Mytask  extends AsyncTask<Integer, Integer, Integer>{@Overrideprotected Integer doInBackground(Integer... params) {Integer leftMargin = menuParams.leftMargin;while(true){leftMargin  = leftMargin + params[0];if(leftMargin > rightEdge){leftMargin = rightEdge;break;}if(leftMargin < leftEdge){leftMargin  = leftEdge;break;}publishProgress(leftMargin);try {Thread.sleep(30);} catch (InterruptedException e) {e.printStackTrace();}}//判断菜单是显示还是隐藏if(params[0]>0){isMenuVisible  = true;}else if(params[0] < 0){isMenuVisible = false;}return leftMargin;}@Overrideprotected void onPostExecute(Integer result) {menuParams.leftMargin  = result;menu.setLayoutParams(menuParams);}@Overrideprotected void onProgressUpdate(Integer... values) {menuParams.leftMargin  = values[0];menu.setLayoutParams(menuParams);}}}
其中MainActivity中initlayout方法就是对布局初始化,紧接着我们通过手指的移动来判断菜单的隐藏或显示,这里的Mytask类呢,是为了菜单在滑动过程中能有一种滑动的效果,就是不断改变leftMargin的值。

下面是程序运行后展示的效果,当然了,这只是展示其中的原理,很多方面都没有考虑。


这是刚开始的界面,以下是当我们手指向右滑动时,左边的菜单布局会以每30ms滑动30像素的速度向右滑动,最终的效果是


安卓的下拉刷新和侧滑写法都差不多,这里就只展示效果,代码可以自行查看。


之后会以每30ms向上滑动30像素的速度向上滑动,最终是把下拉刷新头隐藏掉。

源码下载点击这里

0 0