布局(1) WP风格滑动布局模仿,类似360手机安全卫士

来源：互联网发布：炒股分析软件编辑：程序博客网时间：2024/05/20 09:26

转载请注明出处：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的Viewprivate final int btWidth = 170;private final int btHeight = 170;@Overrideprotected 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();}@Overridepublic 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() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return mViews.size();}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager)container).removeView(mViews.get(position));}@Overridepublic 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