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

现在的位置: 首页 > 综合 > 正文

RSS

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

2014年08月11日 ⁄ 综合 ⁄ 共 10875字 ⁄ 字号小中大 ⁄ 评论关闭

转载请注明出处：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

【上篇】这是你的船读后感
【下篇】导航(1) 侧滑菜单导航可替代AndroidSideMenu

作者: awning

该日志由 awning 于10年前发表在综合分类下，最后更新于 2014年08月11日.
转载请注明: 布局(1) WP风格滑动布局模仿,类似360手机安全卫士 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: awning

书签

最新文章New

本站推荐

返回首页