Android统一界面的实现

 Android统一界面的实现

 

一. 需求介绍及描述

 

 现在Android应用追求界面简洁统一，例如qq的顶部导航栏，都是按钮+标题+右边按钮组件的样式(如图1，图2)。

 

   

       (图1)                                                         (图2)

下面介绍下这种需求的实现：

 

基本的需求如下：

  (a)左边的按钮基本都是返回的功能

  (b)中间的标题随页面的不同而变化

  (c)右边的按钮可有可无，点击事件随具体的页面功能而定。

 

二：实现思路：

  1. 我们要创建一个自己的view组件，它需要创建：按钮+标题+预留操作这个格式的布   局文件。同时暴露出来组件接口：设置中间标题的接口、设置右边组件是否可见的接口、及右边组件的监听绑定接口。

  2. 我们需要创建一个基类，负责把子类里边的布局和view组件的布局合理的组装在一起。

  3. 子类继承了基类，就可以组装出来各种顶部栏一样，中间内容多变的Activity了。

 

三：关键代码：

　

   1) TopNavigation :  view类：

 

 public class TopNavigation extends LinearLayout {

     ......

 

    /** 设置导航条文字内容*/

         public void setTitle(int resId) {...}

 

     /** 设置右边组件是否可见*/

     public void setRightLayoutVisible(int visibility) {...}

 

     /** 设置导航条右边点击事件*/

         public void setOnRightIconClickListener(OnClickListener clickListener) {...}

}

    2) 基类  BaseActivity

 

   public  class BaseActivity extends Activity {

        

         private TopNavigation mDefaultTopNavigation;

         private LinearLayout mActivityLayout;

 

         @Override

         protected void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   mDefaultTopNavigation = new TopNavigation(this);

        //基类里边设置返回功能的实现

                   mDefaultTopNavigation.setOnLeftIconClickListener(...});

                   ...........

         }

        

    //核心代码

         @Override

         public void setContentView(int layoutResID) {

        //获取到子里边的布局

                   View content = LayoutInflater.from(this).inflate(layoutResID, null);

                   if (mActivityLayout != null) {

                            mActivityLayout.removeAllViews();

                   }

        //创建一个新布局，分别把顶部view和子类里边的布局按竖向布局的方式添加进                   去，最后重新加载布局。

                   mActivityLayout = new LinearLayout(this);

                   mActivityLayout.setOrientation(LinearLayout.VERTICAL);

                   mActivityLayout.addView(mDefaultTopNavigation);

                   LinearLayout.LayoutParams layoutParams =

        new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,

                      LinearLayout.LayoutParams.FILL_PARENT);

                   mActivityLayout.addView(content, layoutParams);

                   super.setContentView(mActivityLayout);

 

         }

        

}

 

3)使用它的子类：

 

  public class AccountLogin extends BaseActivity {

 

  public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.accountlogin);       

        getTopNavigation().setTitle(R.string.login_btn_account);

         getTopNavigation().setRightLayoutVisible(View.INVISIBLE);

        ...  

  }

 

  ...

}

这样就实现了一个带返回键+标题为关于的+右边组件隐藏的关于界面。

 Android统一界面的实现

 

一. 需求介绍及描述

 

 现在Android应用追求界面简洁统一，例如qq的顶部导航栏，都是按钮+标题+右边按钮组件的样式(如图1，图2)。

 

 

       (图1)                                                         (图2)

下面介绍下这种需求的实现：

 

基本的需求如下：

  (a)左边的按钮基本都是返回的功能

  (b)中间的标题随页面的不同而变化

  (c)右边的按钮可有可无，点击事件随具体的页面功能而定。

 

二：实现思路：

  1. 我们要创建一个自己的view组件，它需要创建：按钮+标题+预留操作这个格式的布   局文件。同时暴露出来组件接口：设置中间标题的接口、设置右边组件是否可见的接口、及右边组件的监听绑定接口。

  2. 我们需要创建一个基类，负责把子类里边的布局和view组件的布局合理的组装在一起。

  3. 子类继承了基类，就可以组装出来各种顶部栏一样，中间内容多变的Activity了。

 

三：关键代码：

　

   1) TopNavigation :  view类：

 

 public class TopNavigation extends LinearLayout {

     ......

 

    /** 设置导航条文字内容*/

         public void setTitle(int resId) {...}

 

     /** 设置右边组件是否可见*/

     public void setRightLayoutVisible(int visibility) {...}

 

     /** 设置导航条右边点击事件*/

         public void setOnRightIconClickListener(OnClickListener clickListener) {...}

}

    2) 基类  BaseActivity

 

   public  class BaseActivity extends Activity {

        

         private TopNavigation mDefaultTopNavigation;

         private LinearLayout mActivityLayout;

 

         @Override

         protected void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   mDefaultTopNavigation = new TopNavigation(this);

        //基类里边设置返回功能的实现

                   mDefaultTopNavigation.setOnLeftIconClickListener(...});

                   ...........

         }

        

    //核心代码

         @Override

         public void setContentView(int layoutResID) {

        //获取到子里边的布局

                   View content = LayoutInflater.from(this).inflate(layoutResID, null);

                   if (mActivityLayout != null) {

                            mActivityLayout.removeAllViews();

                   }

        //创建一个新布局，分别把顶部view和子类里边的布局按竖向布局的方式添加进                   去，最后重新加载布局。

                   mActivityLayout = new LinearLayout(this);

                   mActivityLayout.setOrientation(LinearLayout.VERTICAL);

                   mActivityLayout.addView(mDefaultTopNavigation);

                   LinearLayout.LayoutParams layoutParams =

        new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,

                      LinearLayout.LayoutParams.FILL_PARENT);

                   mActivityLayout.addView(content, layoutParams);

                   super.setContentView(mActivityLayout);

 

         }

        

}

 

3)使用它的子类：

 

  public class AccountLogin extends BaseActivity {

 

  public void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.accountlogin);       

        getTopNavigation().setTitle(R.string.login_btn_account);

         getTopNavigation().setRightLayoutVisible(View.INVISIBLE);

        ...  

  }

 

  ...

}

这样就实现了一个带返回键+标题为关于的+右边组件隐藏的关于界面。