Android仿360衛士佈局風格

已經好久沒更新博客了，今天花點時間給大家寫一篇佈局開發。給大家帶來的佈局效果是仿照360安全衛士，因爲這個小項目是某個公司需要開發的，閒着也是閒着，就給自己找點活幹，這個項目暫時還是停在這。目前呢，只是完成了主界面大概佈局，邏輯代碼還沒實現呢。

首先，我看到咱們的效果圖。然後再看到360安全衛士的界面圖。效果是不是還可以呢？圖片素材我都是隨便找的，後期真正做的時候得替換掉。

我們先從最上面說起，中間一個標題，右上角一個menu的圖標，採用的是沉浸式標題欄。最下面是個自定義控件，大家也可以不使用自定義控件代替，不過爲了後期的方便，我還是把它做成了自定義控件的形式。要實現沉浸式標題欄，我們只需要在Activity中加入這幾行代碼就可以了。

 if(VERSION.SDK_INT>=VERSION_CODES.KITKAT){
        	getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        	getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

在加入了下面三行代碼後，再在xml佈局文件中加入這兩行。這兩行很關鍵，不然的話就會造成明顯影響。

 android:clipToPadding="true"
    	 android:fitsSystemWindows="true"

演示代碼如下：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //沉浸式狀態欄
        if(VERSION.SDK_INT>=VERSION_CODES.KITKAT){
        	getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        	getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
        setContentView(R.layout.activity_main);
        initView();
    }

首先，我們創建一個activity_main佈局文件，這個是自動生成的。代碼如下：

<LinearLayout 
    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:orientation="vertical"
    >
	<!-- 該2行標誌該佈局爲沉浸式標題欄 -->
    <!-- 標題欄 -->
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#339933"
        android:clipToPadding="true"
    	android:fitsSystemWindows="true">
    	<TextView 
        	android:text="幫幫助手"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:textSize="20sp"
        	android:textColor="#fff"
        	android:layout_centerInParent="true"
        	android:paddingTop="20dp"
       	 	android:gravity="center_vertical"/>
    	<ImageView 
    	    android:id="@+id/menu_icon"
    	    android:layout_width="wrap_content"
    	    android:layout_height="wrap_content"
    	    android:src="@android:drawable/ic_menu_add"
			android:layout_alignParentRight="true"
			android:paddingTop="10dp"
			android:layout_marginRight="10dp"/>    
    </RelativeLayout>
    <!-- 中間部分 -->
     <include layout="@layout/main_middle_content"/>
</LinearLayout>

在這，爲了防止xml文件過長，不易於修改，使用了include嵌套了另外一個xml佈局文件。引入方式如下。

 <include layout="@layout/main_middle_content"/>

中間部分的middle.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mero="http://schemas.android.com/apk/res/com.mero.wyt_register"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#F5F5F5" >
    <!-- 此部分爲上半部分 -->
    <LinearLayout 
          android:layout_width="match_parent"
          android:layout_height="40dp"
          android:orientation="vertical"
          android:background="#FFFFFF"
          >
          <LinearLayout 
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal"
              >
              <TextView 
              android:layout_width="2dp"
              android:layout_height="27dp"
              android:layout_gravity="center_vertical"
              android:background="#339933"
              android:layout_marginLeft="10dp"
              />
               <LinearLayout 
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:orientation="vertical"
              >
          <TextView 
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="xposed安裝"
              android:textSize="14sp"
              android:textColor="#292421"
              android:gravity="center_vertical"
              android:layout_gravity="center_vertical"
              android:paddingLeft="5dp"
              android:layout_marginTop="7dp"
              />
		<TextView 
              android:layout_width="320dp"
              android:layout_height="1dp"
              android:layout_gravity="center_horizontal"
              android:background="#F5F5F5"
              android:layout_marginTop="10dp"
              android:layout_marginLeft="5dp"
              />
          </LinearLayout>
          </LinearLayout>
        
          
      </LinearLayout>
    <!-- 以下給安裝xposed部分 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        android:background="#FFFFFF"
        >
   <ImageView 
       android:id="@+id/panel_register_left_img"
       android:layout_width="40dp"
       android:layout_height="40dp"
       android:src="@drawable/momo"
       android:layout_gravity="center_vertical"
       android:layout_marginLeft="20dp"
       />
   <LinearLayout 
       android:layout_width="200dp"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_gravity="center_vertical"
       android:layout_marginLeft="5dp"
       >
       <TextView 
           android:id="@+id/tx_install_xposed"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="xposed安裝"
           android:textSize="15sp"
           android:textColor="#000000"
           />
        <TextView 
           android:id="@+id/tx_install_introduction"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="安裝xposed框架後可使用所有功能"
           android:textSize="10sp"
           android:textColor="#80000000"
           android:layout_below="@id/tx_install_xposed"
           />
       
   </LinearLayout>
   <Button
       android:id="@+id/panel_register_right_img"
       android:text="未安裝"
       android:textColor="#000000"
       android:background="@drawable/button_shape"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center_vertical"
       />
    </LinearLayout>
    <!-- 以上給安裝xposed部分 -->
     <LinearLayout 
          android:layout_width="match_parent"
          android:layout_height="40dp"
          android:orientation="vertical"
          android:background="#FFFFFF"
          >
          <LinearLayout 
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal"
              >
              <TextView 
              android:layout_width="2dp"
              android:layout_height="27dp"
              android:layout_gravity="center_vertical"
              android:background="#339933"
              android:layout_marginLeft="10dp"
              />
               <LinearLayout 
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:orientation="vertical"
              >
              <TextView 
              android:layout_width="320dp"
              android:layout_height="1dp"
              android:layout_gravity="center_horizontal"
              android:background="#F5F5F5"
              android:layout_marginTop="5dp"
              android:layout_marginLeft="5dp"
              />
          <TextView 
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="一鍵清機"
              android:textSize="14sp"
              android:textColor="#292421"
              android:gravity="center_vertical"
              android:layout_gravity="center_vertical"
              android:paddingLeft="5dp"
              android:layout_marginTop="5dp"
              />

          </LinearLayout>
          </LinearLayout>
        
          
      </LinearLayout>
    <!-- 以下給一鍵清機按鈕 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#FFFFFF"
        >
   		<Button 
   		    android:layout_width="300dp"
   		    android:layout_height="50dp"
   		    android:background="@drawable/button_shape"
   		    android:textColor="#000000"
   		    android:gravity="center"
   		    android:text="一鍵清機"/>
	<TextView 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="正在清機中......"
	    android:layout_marginTop="20dp"
	    android:layout_marginRight="100dp"
	    android:textColor="#339933"
	    />
   		</LinearLayout>
     <!-- 以上給一鍵註冊按鈕上 --> 
     <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1"
         android:orientation="vertical"
         android:layout_marginTop="20dp"
         >
          <LinearLayout 
          android:layout_width="match_parent"
          android:layout_height="40dp"
          android:orientation="horizontal"
          android:background="#FFFFFF"

          >
          <TextView 
              android:layout_width="2dp"
              android:layout_height="27dp"
              android:layout_gravity="center_vertical"
              android:background="#339933"
              android:layout_marginLeft="10dp"
              />
          <TextView 
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="功能大全"
              android:textSize="14sp"
              android:textColor="#292421"
              android:gravity="center_vertical"
              android:layout_gravity="center_vertical"
              android:layout_marginLeft="5dp"
              />
      </LinearLayout>
      <!-- 華麗的分隔線 -->
       <TextView 
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:hint="@null"
            />
       <!-- 用於包含下面的網格部分 -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
	        <LinearLayout 
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        android:orientation="horizontal"
	        android:layout_gravity="center_horizontal">
	    	<com.mero.wyt_register.widget.MixTextImage 
	    	android:id="@+id/mix_01"
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="淘寶註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/taobao"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	    	<com.mero.wyt_register.widget.MixTextImage 
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="天貓註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/tianmao"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	    	<com.mero.wyt_register.widget.MixTextImage 
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="京東註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/jingdong"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	   	 </LinearLayout>
	    
	     <LinearLayout 
	        android:layout_width="match_parent"
	        android:layout_height="match_parent"
	        android:orientation="horizontal"
	        android:layout_gravity="center_horizontal"
	        >
	    	<com.mero.wyt_register.widget.MixTextImage 
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="陌陌註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/momo"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	    	<com.mero.wyt_register.widget.MixTextImage 
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="微博註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/weibo"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	    	<com.mero.wyt_register.widget.MixTextImage 
		    android:layout_width="wrap_content"
		    android:layout_height="80dp"
		    android:layout_weight="1"
		    mero:text="微信註冊"
		    mero:text_color="#000000"
		    mero:text_size="7sp"
		    mero:image_src="@drawable/weixin"
		    mero:image_width="48dp"
		    mero:image_height="48dp"
		    />
	    </LinearLayout>
     </LinearLayout>
     
    </LinearLayout>
    </LinearLayout>

大家可能好奇中間的那個線怎麼實現的呢？其實很簡單。我們可以用一個TextView就可以了，設置一下背景顏色，使得高度或者寬度爲1dp就可以了。

另外，中間的那個按鈕，當按下的時候顏色加深。這時候得增加selector選擇器。

在Drawable目錄下新增三個文件button_shape_be_pressed.xml，button_shape_not_press.xml,button_shape.xml。

button_shape_be_pressed.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- the xml is used the button pressed -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
    <!-- 填充的顏色 -->
    <solid android:color="#339933"/>
    <gradient 
        android:angle="270"
        android:startColor="#339933"
        android:endColor="#339933"
        android:useLevel="true"
        />
	<!-- 設置按鈕的四個角度弧形 -->
	<corners android:radius="5dp"/>
	<padding 
	    android:left="10dp"
	    android:right="10dp"
	    android:top="10dp"
	    android:bottom="10dp"
	    />
</shape>

button_shape_not_press.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- the xml is used the button not pressed -->
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" >
    <!-- 填充的顏色 -->
    <solid android:color="#00c78c"/>
	<!-- 設置按鈕的四個角度弧形 -->
	<corners android:radius="5dp"/>
	<padding 
	    android:left="10dp"
	    android:right="10dp"
	    android:top="10dp"
	    android:bottom="10dp"
	    />
</shape>

button_shape.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/button_shape_be_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/button_shape_not_press" android:state_pressed="false"></item>
</selector>

把這三個文件放在Drawable目錄下就可以了，在xml的Button控件設置下background就可以了。使用方式如下：

<Button
       android:id="@+id/panel_register_right_img"
       android:text="未安裝"
       android:textColor="#000000"
       android:background="@drawable/button_shape"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center_vertical"
       />

好了，就是這麼簡單，看到佈局文件的時候，熟能生巧，大家多多動手吧! 最後，給大家放上該軟件的結構圖。

Android仿360衛士佈局風格

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

TMS320f28335實現步進電機的驅動程序及原理分析

Android ListView實現通訊錄的實例

打造狂拽炫酷的主流自定義側滑控件--仿酷狗和QQ5.0集成控件

Android仿360衛士佈局風格

Android通過ViewPager實現Tab面板實例

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結