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卫士布局风格

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以太網驅動總結