很多应用为了节省空间而又使界面能够充足的显示信息,大多数应用都采用了侧边栏的方式,如下图:
来说说它的思路,底下是两个或多个视图,分别通过控制它们的宽度、左边距来控制它们的显示,来看看代码
activity_main.xml
01 | < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" |
02 | xmlns:tools = "http://schemas.android.com/tools" |
03 | android:id = "@+id/layout" |
04 | android:layout_width = "match_parent" |
05 | android:layout_height = "match_parent" |
06 | android:orientation = "horizontal" |
07 | tools:context = ".MainActivity" > |
10 | android:id = "@+id/menu" |
11 | android:layout_width = "match_parent" |
12 | android:layout_height = "match_parent" |
13 | android:background = "@drawable/menu" > |
17 | android:id = "@+id/content" |
18 | android:layout_width = "match_parent" |
19 | android:layout_height = "match_parent" |
20 | android:background = "@drawable/content" > |
MainActivity.java
01 | public class MainActivity extends Activity implements OnTouchListener |
04 | private LinearLayout menu; |
05 | private LinearLayout content; |
06 | private LayoutParams menuParams; |
07 | private LayoutParams contentParams; |
10 | private static final int menuPadding = 80 ; |
13 | private int disPlayWidth; |
18 | private boolean mIsShow = false ; |
19 | private static final int speed = 50 ; |
22 | protected void onCreate(Bundle savedInstanceState) |
24 | super .onCreate(savedInstanceState); |
25 | requestWindowFeature(Window.FEATURE_NO_TITLE); |
26 | setContentView(R.layout.activity_main); |
28 | disPlayWidth = getWindowManager().getDefaultDisplay().getWidth(); |
30 | menu = (LinearLayout) findViewById(R.id.menu); |
31 | content = (LinearLayout) findViewById(R.id.content); |
32 | menuParams = (LayoutParams) menu.getLayoutParams(); |
33 | contentParams = (LayoutParams) content.getLayoutParams(); |
34 | findViewById(R.id.layout).setOnTouchListener( this ); |
36 | menuParams.width = disPlayWidth - menuPadding; |
37 | contentParams.width = disPlayWidth; |
42 | public boolean onTouch(View v, MotionEvent event) |
44 | switch (event.getAction()) |
46 | case MotionEvent.ACTION_DOWN: |
49 | case MotionEvent.ACTION_MOVE: |
51 | case MotionEvent.ACTION_UP: |
57 | private void showMenu( boolean isShow) |
62 | menuParams.leftMargin = 0 ; |
66 | menuParams.leftMargin = 0 - menuParams.width; |
68 | menu.setLayoutParams(menuParams); |
上述代码只是用两张图片代替了两个复杂的view(layout),你会发现,两个视图虽然可以切换,但没有动画的感觉,再加上要有拖动效果,所以,我们再给它加个平移时间段,看起来有动画的效果
001 | package com.example.test; |
003 | import android.app.Activity; |
004 | import android.os.AsyncTask; |
005 | import android.os.Bundle; |
006 | import android.util.Log; |
007 | import android.view.MotionEvent; |
008 | import android.view.View; |
009 | import android.view.View.OnClickListener; |
010 | import android.view.View.OnTouchListener; |
011 | import android.view.Window; |
012 | import android.widget.LinearLayout; |
013 | import android.widget.LinearLayout.LayoutParams; |
015 | public class MainActivity extends Activity implements OnTouchListener, OnClickListener |
018 | private LinearLayout menu; |
019 | private LinearLayout content; |
020 | private LayoutParams menuParams; |
021 | private LayoutParams contentParams; |
024 | private static final int menuPadding = 80 ; |
027 | private int disPlayWidth; |
032 | private boolean mIsShow = false ; |
033 | private static final int speed = 50 ; |
036 | protected void onCreate(Bundle savedInstanceState) |
038 | super .onCreate(savedInstanceState); |
039 | requestWindowFeature(Window.FEATURE_NO_TITLE); |
040 | setContentView(R.layout.activity_main); |
042 | disPlayWidth = getWindowManager().getDefaultDisplay().getWidth(); |
044 | menu = (LinearLayout) findViewById(R.id.menu); |
045 | menu.setOnClickListener( this ); |
046 | content = (LinearLayout) findViewById(R.id.content); |
047 | content.setOnClickListener( this ); |
048 | menuParams = (LayoutParams) menu.getLayoutParams(); |
049 | contentParams = (LayoutParams) content.getLayoutParams(); |
052 | menuParams.width = disPlayWidth - menuPadding; |
053 | contentParams.width = disPlayWidth; |
058 | public void onClick(View v) |
063 | new showMenuAsyncTask().execute(- 50 ); |
066 | new showMenuAsyncTask().execute( 50 ); |
073 | public boolean onTouch(View v, MotionEvent event) |
075 | switch (event.getAction()) |
077 | case MotionEvent.ACTION_DOWN: |
080 | case MotionEvent.ACTION_MOVE: |
082 | case MotionEvent.ACTION_UP: |
088 | private void showMenu( boolean isShow) |
093 | menuParams.leftMargin = 0 ; |
097 | menuParams.leftMargin = 0 - menuParams.width; |
099 | menu.setLayoutParams(menuParams); |
104 | *这是主要代码:模拟动画过程,也让我更熟悉了AsyncTask这玩意儿 |
107 | class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer> |
111 | protected Integer doInBackground(Integer... params) |
113 | int leftMargin = menuParams.leftMargin; |
124 | leftMargin += params[ 0 ]; |
125 | if (params[ 0 ] > 0 && leftMargin >= 0 ) |
128 | } else if (params[ 0 ] < 0 && leftMargin <= -menuParams.width) |
132 | publishProgress(leftMargin); |
136 | } catch (InterruptedException e) |
145 | protected void onProgressUpdate(Integer... values) |
147 | super .onProgressUpdate(values); |
148 | menuParams.leftMargin = values[ 0 ]; |
149 | menu.setLayoutParams(menuParams); |
153 | protected void onPostExecute(Integer result) |
155 | super .onPostExecute(result); |
156 | menuParams.leftMargin = result; |
157 | menu.setLayoutParams(menuParams); |