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

转载请注明出处：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 stubmButtonImage = 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" ><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent" ><!-- 处理左右滑动，及显示方块 -->        <android.support.v4.view.ViewPagerandroid: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><RelativeLayoutandroid: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><!-- 第二行 --><LinearLayoutandroid: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><!-- 第三行 --><LinearLayoutandroid:id="@+id/lay_wp_ln3" android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/lay_wp_ln2"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"                            android:id="@+id/wp_lc31"                   android:layout_margin="5dp"/>  <LinearLayoutandroid: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"  ><TextViewandroid: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

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

Android滑动浮层(滑动布局中使其中子布局一个浮动)
引言: 滑动浮层中,一般在一些详情界面,或者是一些大评论界面.一个内容比较多的单元,对其中的一部分内容控件做替换的展示(不排除有另类的产品定义)..这个可以点击替换的类似导航的布局,一般就是浮 ...
android 自定义event,Android运用onTouchEvent自定义滑动布局
写在自定义之前我们也许会遇到,自定义控件的触屏事件处理,先来了解一下View类中的,onTouch事件和onTouchEvent事件. 1.boolean onTouch(View v, Motio ...
Android - 直播上下滑动布局（1）
概览 Android - 直播布局(1) Android - 直播布局(2) Android - 直播布局(1) 2020 年以来,因为疫情原因,直播格外的火.很多应用都引入了直播功能,我在写直播布局 ...
仿oppo手机浏览器首页的滑动布局
仿oppo手机浏览器首页的滑动布局原效果图我大概实现的样子这个其实主要是一些事件分发的一些处理周末的午后,我悠然的躺着床上,甚是无聊,拿起我的oppo手机,打开浏览器准备输入我熟悉的xxx . ...
ppt页面样式html,酷! 不同风格页面布局幻灯片特效js实现
这是一款效果非常炫酷的不同风格页面布局幻灯片特效.该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果. 该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CS ...
布局覆盖超出一部分_Android 布局优化
布局是一个App非常关键的一部分,布局性能的好坏可直接影响到用户的体验.试想下如果一个RecyclerView滑动时异常卡顿,那用户估计也没有心情去住下滑了,可能就直接强制杀掉App了去,然后回过头去 ...
Android 开发 -- 开发第一个安卓程序、Android UI开发（布局的创建：相对布局和线性布局、控件单位：px pt dp sp、常用控件、常见对话框、ListView）
文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...
android约束布局中链,Android-ConstraintLayout(约束布局)-Chains链(链条布局,Nice)
到Chains这个部分了.之前的新项目做得登录,注册,重置密码等暂时还没用到这种.不过后面可能随着新的设计可能会涉及到.所以赶紧过来看看先.新项目基本就打算全部用约束布局实现了.实际用了也会越来越熟悉 ...
C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码...
原文:C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码前言系列目录 C#使用Xamarin开发可移植移动应用目录源码地址:https://github. ...

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

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

最新文章

热门文章