转载请注明出处:http://blog.csdn.net/xcl168/article/details/14106847
一直觉得360手机安全卫士的界面有特点,想实现下。但不是很清楚那些个方块怎么实现,不想用放固定图片的方法。
直到那天看到网友的一篇文章 自定义Android带图片和文字的ImageButton 弄清这个后, 做这个界面就很简单了。
例子主要利用 ViewPager + FrameLayout + 带图片文字的ImageButton 来大致实现其左右滑动和方块的点击处理。
效果如下:
做得这个例子虽然功能并不全,也不完完全全像,但至少可用了,如在实际应用中,封装下也够用了。
1. 首先要自定义一个ImageButton,来实现方块的效果。
这个类简单说就是在LinearLayout中放一个ImageView和TextView,布局成类似WP方块的样式,然后封装起来以便主程序调用。
public class WPImageButton extends LinearLayout{
private ImageView mButtonImage = null;
private TextView mButtonText = null;
public WPImageButton(Context context,
int imageResId,
int textResId) {
super(context);
// TODO Auto-generated constructor stub
mButtonImage = new ImageView(context);
mButtonText = new TextView(context);
setImageResource(imageResId);
mButtonImage.setPadding(0, 0, 0, 0);
setText(textResId);
setTextColor(0xFF000000);
//左, 上,右,下
mButtonText.setPadding(0,35, 50 ,0);
LinearLayout.LayoutParams layoutParam =
new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParam.setMargins(10, 20, 10, 0);
//设置本布局的属性
setClickable(true); //可点击
setFocusable(true); //可聚焦
setBackgroundResource(android.R.drawable.btn_default); //布局才用普通按钮的背景
setOrientation(LinearLayout.VERTICAL); //垂直布局
//首先添加Image,然后才添加Text
//添加顺序将会影响布局效果
addView(mButtonImage);
addView(mButtonText);
setBackgroundColor(Color.YELLOW);
}
/*
* setImageResource方法
*/
public void setImageResource(int resId) {
mButtonImage.setImageResource(resId);
}
/*
* setText方法
*/
public void setText(int resId) {
mButtonText.setText(resId);
}
public void setText(CharSequence buttonText) {
mButtonText.setText(buttonText);
}
/*
* setTextColor方法
*/
public void setTextColor(int color) {
mButtonText.setTextColor(color);
}
}
2. 建立布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 处理左右滑动,及显示方块 -->
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000" />
<!-- 右边的菜单按纽 -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<!-- 顶上的菜单按纽 -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arrow_right_alt1"
android:layout_alignParentTop ="true"
android:layout_alignParentRight ="true"
android:layout_margin="15dp"
android:layout_marginTop="50dp"
/>
<!-- 底下的菜单按纽 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#00FFFFFF"
android:id="@+id/wp_lc11"
android:layout_margin="15dp"
android:layout_marginBottom="100dp"
android:layout_alignParentBottom ="true"
android:layout_alignParentRight ="true"
>
<ImageView
android:id="@+id/exit_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/panel_settings_32"
/>
<ImageView
android:id="@+id/exit_img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/exit_32"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
页面一:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/bg_mp">
<!-- 标题 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:src="@drawable/xclapplogo"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/wp_title"
android:textColor="#6600ff"
android:textSize="20dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="left"
>
<!-- 第一行 -->
<LinearLayout
android:id="@+id/lay_wp_ln1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc11"
android:layout_margin="5dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc12"
android:layout_margin="5dp"
/>
</LinearLayout>
<!-- 第二行 -->
<LinearLayout
android:id="@+id/lay_wp_ln2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/lay_wp_ln1"
android:layout_gravity="right"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc21"
android:layout_margin="5dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc22"
android:layout_margin="5dp"
/>
</LinearLayout>
<!-- 第三行 -->
<LinearLayout
android:id="@+id/lay_wp_ln3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/lay_wp_ln2"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc31"
android:layout_margin="5dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/wp_lc32"
android:layout_margin="5dp"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
页面二
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#556B2F" >
<TextView
android:id="@+id/tv_page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="page2" />
</LinearLayout>
3. 主代码
public class WP360Activity extends Activity {
private ViewPager mPager;
private ArrayList<View> mViews = null;
private View view1 = null; //page的View
private final int btWidth = 170;
private final int btHeight = 170;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//隐藏标题栏
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_wp3602);
mPager = (ViewPager)findViewById(R.id.vPager);
//将要分页显示的View装入数组中
LayoutInflater layFlater = LayoutInflater.from(this);
view1 = layFlater.inflate(R.layout.activity_page1, null);
View view2 = layFlater.inflate(R.layout.activity_page2, null);
//每个页面的Title数据
mViews = new ArrayList<View>();
mViews.add(view1);
mViews.add(view2);
mPager.setAdapter(MyPagerAdapter);
mPager.setCurrentItem(0);
initWPButton();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
/**
* 填充ViewPager的数据适配器
*/
private final PagerAdapter MyPagerAdapter = new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(mViews.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(mViews.get(position));
return mViews.get(position);
}
};
/**
* 为布局文件中定义的布局,填充上要显示的图片,颜色,响应事件......
* 当前例子只处理page1,另一个页需要的再自己扩展,方法类似。
*/
void initWPButton()
{
//方块默认背景色
int wp_color = getResources().getColor(R.color.wp_color);
WPImageButton bt_LC11 = new WPImageButton(view1.getContext(),
R.drawable.telephone, R.string.wp_11);
//获取包裹本按钮的容器
LinearLayout laywp_LC11= (LinearLayout)view1.findViewById(R.id.wp_lc11);
//将我们自定义的Button添加进这个容器
laywp_LC11.addView(bt_LC11);
bt_LC11.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
//设置按钮的监听
bt_LC11.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(WP360Activity.this, "单击了1行1列的菜单 ",
Toast.LENGTH_SHORT).show();
}
});
bt_LC11.setBackgroundColor(wp_color);
bt_LC11.setTextColor(Color.WHITE);
//--==================================================
WPImageButton bt_LC21 = null;
bt_LC21 = new WPImageButton(
view1.getContext(), R.drawable.iron, R.string.wp_21);
//获取包裹本按钮的容器
LinearLayout laywp_LC21 = (LinearLayout) view1.findViewById(R.id.wp_lc21);
//将我们自定义的Button添加进这个容器
laywp_LC21.addView(bt_LC21);
bt_LC21.setBackgroundColor(wp_color);
bt_LC21.setTextColor(Color.WHITE);
bt_LC21.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
/
WPImageButton bt_LC31 = new WPImageButton(
view1.getContext(), R.drawable.home, R.string.wp_31);
//获取包裹本按钮的容器
LinearLayout laywp_LC31 = (LinearLayout)view1.findViewById(R.id.wp_lc31);
//将我们自定义的Button添加进这个容器
laywp_LC31.addView(bt_LC31);
bt_LC31.setBackgroundColor(Color.CYAN);
bt_LC31.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
/
/
WPImageButton bt_LC12 = new WPImageButton(
view1.getContext(), R.drawable.mobilephone, R.string.wp_12);
//获取包裹本按钮的容器
LinearLayout laywp_LC12 = (LinearLayout)view1.findViewById(R.id.wp_lc12);
//将我们自定义的Button添加进这个容器
laywp_LC12.addView(bt_LC12);
bt_LC12.setBackgroundColor(wp_color);
bt_LC12.setTextColor(Color.WHITE);
bt_LC12.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
/
/
WPImageButton bt_LC22 = new WPImageButton(
view1.getContext(), R.drawable.television, R.string.wp_22);
//获取包裹本按钮的容器
LinearLayout laywp_LC22= (LinearLayout)view1.findViewById(R.id.wp_lc22);
//将我们自定义的Button添加进这个容器
laywp_LC22.addView(bt_LC22);
bt_LC22.setBackgroundColor(wp_color);
bt_LC22.setTextColor(Color.WHITE);
bt_LC22.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
/
/
WPImageButton bt_LC32 = new WPImageButton(
view1.getContext(), R.drawable.mill, R.string.wp_32);
//获取包裹本按钮的容器
LinearLayout laywp_LC32 = (LinearLayout)view1.findViewById(R.id.wp_lc32);
//将我们自定义的Button添加进这个容器
laywp_LC32.addView(bt_LC32);
bt_LC32.setBackgroundColor(wp_color);
bt_LC32.setTextColor(Color.WHITE);
bt_LC32.setLayoutParams(new LinearLayout.LayoutParams(btWidth, btHeight));
/
}
}
strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">XCL_导航_布局</string>
<string name="action_settings">Settings</string>
<string name="hello_world">WP滑动布局模仿_类似360手机安全卫士</string>
<string name="author">xiongchuanliang</string>
<string name="wp_title">WP滑动布局模仿(XCL)</string>
<string name="wp_11">11老固话</string>
<string name="wp_12">12对讲机</string>
<string name="wp_21">21手摇机</string>
<string name="wp_22">22电视机</string>
<string name="wp_31">31想家了</string>
<string name="wp_32">32放映机</string>
</resources>
MAIL:xcl_168@aliyun.com
我的CSDN BLOG: http://blog.csdn.net/xcl168