转自:/wangjinyu501/article/details/8083373
最近模仿360手机卫士,做了一个Demo。看了一下360的布局文件,发现它是自定义的View,而不是官方提供的基本组件的组合。效果如下图所示:
这个Demo是可以左右滑动的,并且可以在布局文件中添加组件点击事件。主要是利用ViewPager类来实现的。
public class Main360Activity extends Activity{private ViewPager awesomePager;private LinearLayout lin1, lin2;private Context cxt;private AwesomePagerAdapter awesomeAdapter;private LayoutInflater mInflater;private List<View> mListViews;boolean result = true;public void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main360);cxt = this;lin1 = (LinearLayout) findViewById(R.id.lin1);lin2 = (LinearLayout) findViewById(R.id.lin2);awesomeAdapter = new AwesomePagerAdapter();awesomePager = (ViewPager) findViewById(R.id.awesomepager);awesomePager.setAdapter(awesomeAdapter);mListViews = new ArrayList<View>();mInflater = getLayoutInflater();mListViews.add(mInflater.inflate(R.layout.tab360, null));mListViews.add(mInflater.inflate(R.layout.tab360, null));}private class AwesomePagerAdapter extends PagerAdapter{public int getCount(){return mListViews.size();}public Object instantiateItem(View collection, int position){((ViewPager) collection).addView(mListViews.get(position), 0);if (position == 0){ImageView download_btn = (ImageView) collection.findViewById(R.id.download_btn);download_btn.setOnClickListener(new View.OnClickListener(){public void onClick(View v){//if (result == true)//{////lin1.scrollBy(0, 0);////lin1.scrollTo(80, 0);////lin1.setPadding(0, 30, 0, 30);////lin2.setVisibility(View.VISIBLE);////result = false;////} else//{////lin1.setPadding(10, 30, 0, 30);////lin1.scrollBy(80, 0);////lin1.scrollTo(0, 0);////lin2.setVisibility(View.GONE);////result = true;//}}});// }// });} else{ImageView download_btn = (ImageView) collection.findViewById(R.id.download_btn);download_btn.setOnClickListener(new View.OnClickListener(){public void onClick(View v){new AlertDialog.Builder(Main360Activity.this).setTitle("说明").setMessage("单个页卡内按钮事件测试").setNegativeButton("确定",new DialogInterface.OnClickListener(){public void onClick(DialogInterface dialog,int which){}}).show();}});}return mListViews.get(position);}public void destroyItem(View collection, int position, Object view){((ViewPager) collection).removeView(mListViews.get(position));}public boolean isViewFromObject(View view, Object object){return view == (object);}public void finishUpdate(View arg0){}public void restoreState(Parcelable arg0, ClassLoader arg1){}public Parcelable saveState(){return null;}public void startUpdate(View arg0){}}// @Override// public boolean onCreateOptionsMenu(Menu menu)// {// getMenuInflater().inflate(R.menu.activity_main, menu);// return true;// }}
main360.xml的内容如下:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent" ><android.support.v4.view.ViewPagerandroid:id="@+id/awesomepager"android:layout_width="match_parent"android:layout_height="match_parent" ></android.support.v4.view.ViewPager></RelativeLayout>
tab360.xml的内容如下:
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:id="@+id/lin1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@drawable/background"android:baselineAligned="false"android:orientation="horizontal"android:paddingBottom="30dp"android:paddingLeft="10dp"android:paddingTop="30dp" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"android:orientation="vertical" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:background="#FF7F24" ></LinearLayout><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:layout_marginLeft="5dp"android:background="#FF7F24" ></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:background="#3399ff" ></LinearLayout><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:layout_marginLeft="5dp"android:background="#3399ff" ></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:background="#3399ff" ></LinearLayout><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:layout_marginLeft="5dp"android:background="#3399ff" ></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:orientation="horizontal" ><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:background="#953399ff" ></LinearLayout><LinearLayoutandroid:layout_width="108dp"android:layout_height="108dp"android:layout_marginLeft="5dp"android:background="#953399ff" ></LinearLayout></LinearLayout></LinearLayout><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:orientation="vertical" ><ImageViewandroid:id="@+id/download_btn"android:layout_width="36dp"android:layout_height="36dp"android:src="@drawable/a" /><ImageViewandroid:id="@+id/delete_btn"android:layout_width="36dp"android:layout_height="36dp"android:layout_marginTop="20dp"android:src="@drawable/b" /><ImageViewandroid:id="@+id/set_btn"android:layout_width="36dp"android:layout_height="36dp"android:layout_marginTop="20dp"android:src="@drawable/c" /><ImageViewandroid:id="@+id/etra_btn"android:layout_width="36dp"android:layout_height="36dp"android:layout_marginTop="20dp"android:src="@drawable/ic_launcher" /></LinearLayout></RelativeLayout></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/lin2"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_gravity="right"android:background="#000000"android:orientation="vertical"android:visibility="gone" ><TextViewandroid:layout_width="80dp"android:layout_height="fill_parent"android:text="dddddddddddd" /></LinearLayout></FrameLayout>
关于Viewpager的用法大家可以去看一下资料,在此不再详述。这个tab.xml就是用来切换的布局,也就是左右滑动的布局文件。我们在这里用来两个切换布局,可以根据自己的需求动态增删。但是,仔细看官方的程序我们发现,它的背景是不变的。就这需要使用其他的方法来实现,也就是自定义View,下一节将讲述如何自定义View来实现。
需要源码的朋友可以留一下你的邮箱。
其他UI设计日志链接如下:
仿微信导航
仿微信主界面
仿QQ登陆
仿QQ空间