最近模仿360手机卫士,做了一个Demo。看了一下360的布局文件,发现它是自定义的View,而不是官方提供的基本组件的组合。效果如下图所示:




这个Demo是可以左右滑动的,并且可以在布局文件中添加组件点击事件。主要是利用ViewPager类来实现的。

MainActivity.java

package com.example.viewpapertest;


import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.os.Parcelable;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;


public class MainActivity 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;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
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.tab1, null));
mListViews.add(mInflater.inflate(R.layout.tab2, null));


}


private class AwesomePagerAdapter extends PagerAdapter{


public int getCount() {
return mListViews.size();
}

/**
* Create the page for the given position. The adapter is responsible
* for adding the view to the container given here, although it only
* must ensure this is done by the time it returns from
* {@link #finishUpdate()}.
*
* @param container The containing View in which the page will be shown.
* @param position The page position to be instantiated.
* @return Returns an Object representing the new page. This does not
* need to be a View, but can be some other container of the page.
*/
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(MainActivity.this)
.setTitle("说明")
.setMessage("单个页卡内按钮事件测试")
.setNegativeButton("确定",
new DialogInterface.OnClickListener() {
public void onClick(
DialogInterface dialog,
int which) {
}
}).show();
}
});
}


return mListViews.get(position);
}

/**
* Remove a page for the given position. The adapter is responsible
* for removing the view from its container, although it only must ensure
* this is done by the time it returns from {@link #finishUpdate()}.
*
* @param container The containing View from which the page will be removed.
* @param position The page position to be removed.
* @param object The same object that was returned by
* {@link #instantiateItem(View, int)}.
*/
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);
}


/**
* Called when the a change in the shown pages has been completed. At this
* point you must ensure that all of the pages have actually been added or
* removed from the container as appropriate.
* @param container The containing View which is displaying this adapter's
* page views.
*/
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;
}
}

main.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>

tab.xml

<?xml version="1.0" encoding="utf-8"?>
<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:baselineAligned="false"
android:background="@drawable/rootblock_default_bg"
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/rootblock_icon_download_bg" />


<ImageView
android:id="@+id/delete_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_clear_bg" />


<ImageView
android:id="@+id/set_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_set_bg" />


<ImageView
android:id="@+id/etra_btn"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="20dp"
android:src="@drawable/rootblock_icon_add_bg" />
</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来实现。

下载地址


更多相关文章

  1. Android(安卓)Studio 中的maven仓库使用
  2. Android中文件与文件夹的创建(file)
  3. Android(安卓)简单引导页实现
  4. Android基于ViewPager实现类似微信页面切换效果
  5. Android(安卓)UI设计——ViewPage中自定义标题栏(四)
  6. APK 变成 ZIP:Android(安卓)手机应用程序文件下载服务器需要注意
  7. Android签名及权限变化详解
  8. Android(安卓)Studio 3.6 Windos、mac最新版安装教程图片
  9. Android(安卓)软键盘弹出时把布局顶上去或者覆盖上去需求解决方

随机推荐

  1. Android已经完全不受Google控制了
  2. Android(安卓)ListView动态刷新
  3. android 开机流程
  4. Android之gif动画实现
  5. android 编译源码不生成odex
  6. Android(安卓)调用手机系统照相机拍照
  7. RecyclerView 实现item点击水波纹动画
  8. Android常用权限
  9. 基于百度地图API的Android公交换乘导航
  10. [Android实例] Android网络收音机项目(内