最近模仿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的内容如下：
<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" >
<android.support.v4.view.ViewPager
android:id="@+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
tab360.xml的内容如下：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android: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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:background="#FF7F24" >
</LinearLayout>
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:layout_marginLeft="5dp"
android:background="#FF7F24" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:background="#3399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:layout_marginLeft="5dp"
android:background="#3399ff" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:background="#953399ff" >
</LinearLayout>
<LinearLayout
android:layout_width="108dp"
android:layout_height="108dp"
android:layout_marginLeft="5dp"
android:background="#953399ff" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/download_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="@drawable/a" />
<ImageView
android:id="@+id/delete_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/b" />
<ImageView
android:id="@+id/set_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/c" />
<ImageView
android: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>
<LinearLayout
android: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" >
<TextView
android:layout_width="80dp"
android:layout_height="fill_parent"
android:text="dddddddddddd" />
</LinearLayout>
</FrameLayout>
关于Viewpager的用法大家可以去看一下资料，在此不再详述。这个tab.xml就是用来切换的布局，也就是左右滑动的布局文件。我们在这里用来两个切换布局，可以根据自己的需求动态增删。但是，仔细看官方的程序我们发现，它的背景是不变的。就这需要使用其他的方法来实现，也就是自定义View，下一节将讲述如何自定义View来实现。
需要源码的朋友可以留一下你的邮箱。
其他UI设计日志链接如下：
仿微信导航
仿微信主界面
仿QQ登陆
仿QQ空间
