Android导航栏开发漫谈

来源：互联网发布：中联医疗软件编辑：程序博客网时间：2024/04/28 08:57

Android导航栏开发漫谈

很多应用中导航栏做的很酷，所以闲来无事就模仿模仿

1、首先在你的drawable文件夹下面定义一个按钮的样式，比如这样定义navigation_bar_btn.xml：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_pressed="true"><!-- 点击时 -->        <shape>            <!-- 渐变 -->            <gradient android:angle="270" android:endColor="#4876FF" android:startColor="#87CEFA" />            <!-- 描边 -->            <stroke android:width="1px" android:color="#FF000000" />            <!-- 圆角 -->            <corners android:radius="6dp" />            <!-- 大小 -->            <padding android:bottom="10dp" android:left="15dp" android:right="15dp" android:top="10dp" />          </shape>      </item>    <item>          <shape>              <gradient android:angle="270" android:endColor="#ff999999" android:startColor="#ff333333" />              <stroke android:width="1px" android:color="#FF000000" />              <corners android:radius="6dp" />              <padding android:bottom="10dp" android:left="15dp" android:right="15dp" android:top="10dp" />          </shape>      </item></selector>

2、然后在你的drawable文件夹下面定义一个标题栏的样式，比如这样定义navigation_bar_bg.xml：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item>        <shape>            <gradient android:angle="270" android:endColor="#ff050708" android:startColor="#ff595959" android:type="linear" />        </shape>    </item></selector>

3、接下来为你的导航栏设计一个布局，那么久需要你在layout文件夹下面定义一个这个navigationbar.xml：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="45dip"    android:gravity="center_vertical"    android:orientation="horizontal"     android:background="@drawable/navigation_bar_bg"><!-- 对应drawable里面定义的样式 -->    <Button        android:id="@+id/navbarbtn_left"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10.0dip"        android:text="返回"        android:textColor="@android:color/white"         android:background="@drawable/navigation_bar_btn"/><!-- 对应drawable里面定义的样式 -->    <TextView        android:id="@+id/navbartv_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:singleLine="true"        android:text="标题"        android:textColor="@android:color/white" />    <Button        android:id="@+id/navbarbtn_right"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="10.0dip"        android:text="保存"        android:textColor="@android:color/white"         android:background="@drawable/navigation_bar_btn"/><!-- 对应drawable里面定义的样式 --></LinearLayout>

4、然后在你的src目录下面去定义一个view，你可以这样定义一个NavigationView：

public class NavigationView extends RelativeLayout{    public static final int NAVIGATION_BUTTON_LEFT = 0;    public static final int NAVIGATION_BUTTON_RIGHT = 1;    private Context mContext;    private Button navbarbtn_left,navbarbtn_right;    private TextView navbartv_title;        public NavigationView(Context context, AttributeSet attrs, int defStyle)    {        super(context, attrs, defStyle);        init(context);            }    public NavigationView(Context context, AttributeSet attrs)    {        super(context, attrs);        init(context);    }    public NavigationView(Context context)    {        super(context);        init(context);    }    private void init(Context context)    {        mContext = context;        View.inflate(context, R.layout.navigationbar , this);        navbarbtn_left = (Button) findViewById(R.id.navbarbtn_left);        navbarbtn_right = (Button) findViewById(R.id.navbarbtn_right);        navbartv_title = (TextView) findViewById(R.id.navbartv_title);                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(-1, -2);        this.setLayoutParams(lp);        this.setBackgroundResource(R.drawable.navigation_bar_bg);    }    public void setLeftBarButton(String title)    {        setButton(title, NAVIGATION_BUTTON_LEFT);    }    public void setRightBarButton(String title)    {        setButton(title, NAVIGATION_BUTTON_RIGHT);    }    private void setButton(String title, final int which)    {        // remove the old button (if there is one)        Button oldButton = (Button) this.findViewWithTag(new Integer(which));        if (oldButton != null)            this.removeView(oldButton);        Button newButton = new Button(mContext);        newButton.setTag(new Integer(which)); // used to determine which button                                              // is pressed and to remove old                                              // buttons        // set LayoutParams        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(-2, -2);        if (which == NAVIGATION_BUTTON_LEFT)            lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT);        else if (which == NAVIGATION_BUTTON_RIGHT)            lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);        else            throw new IllegalArgumentException("Parameter 'which' must be 0 or 1");        lp.addRule(RelativeLayout.CENTER_VERTICAL);        lp.setMargins(10, 0, 10, 0);        newButton.setLayoutParams(lp);        // set button text        if (NAVIGATION_BUTTON_LEFT == which && navbarbtn_left.getText() == null)        {            this.removeView(navbarbtn_left);            newButton.setText(title);            newButton.setTextSize(13);            newButton.setTextColor(Color.WHITE);            // set button drawable            newButton.setBackgroundResource(R.drawable.navigation_bar_btn);            // add button            this.addView(newButton);        }else if(NAVIGATION_BUTTON_RIGHT == which && navbarbtn_right.getText() == null)        {            this.removeView(navbarbtn_right);            newButton.setText(title);            newButton.setTextSize(13);            newButton.setTextColor(Color.WHITE);            // set button drawable            newButton.setBackgroundResource(R.drawable.navigation_bar_btn);            // add button            this.addView(newButton);        }    }    public void setBarTitle(String title)    {        // remove old title (if exists)        TextView oldTitle = (TextView) this.findViewWithTag("title");        if (oldTitle != null)            this.removeView(oldTitle);        TextView newTitle = new TextView(mContext);        newTitle.setTag("title");        // set LayoutParams        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(-2, -2);        lp.addRule(RelativeLayout.CENTER_IN_PARENT);        lp.setMargins(0, 30, 0, 30);        newTitle.setLayoutParams(lp);        // set text        newTitle.setText(title);        newTitle.setTextSize(22);        newTitle.setTextColor(Color.WHITE);        // add title to NavigationBar        this.addView(newTitle);    }}

5、定义好view后你要做的事情就是在layout文件夹下面做一个布局youactivity.xml，你可以这样干：

<?xml version="1.0" encoding="utf-8"?><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"     tools:context=".youActivity">        <com...NavigationView         android:id="@+id/detailNavBar"         android:layout_width="fill_parent"         android:layout_height="45.0dip"          android:orientation="vertical"  />    </LinearLayout>

6、最后就是查看效果的时候了，那么你需要这样干，在你的Activity中你要做的事情：

public class youActivity extends Activity{    @Override    protected void onCreate(Bundle savedInstanceState)    {        requestWindowFeature(Window.FEATURE_NO_TITLE);        super.onCreate(savedInstanceState);        setContentView(R.layout.youactivity);        NavigationView nav = (NavigationView) findViewById(R.id.detailNavBar);        nav.setLeftBarButton("取消");          nav.setRightBarButton("保存");        nav.setBarTitle("详细");     }}

7、假如说你还需要给两个按钮分别不同的点击事件，那么你可以这样做，在你的view里面加一个这样的方法：

public void setOnClickListener(int swith, OnClickListener listener)    {        if(swith == NAVIGATION_BUTTON_LEFT)        {            navbtnleft.setOnClickListener(listener);        }        if(swith == NAVIGATION_BUTTON_RIGHT)        {            navbtnright.setOnClickListener(listener);        }    }

用的时候在Activity里面加一个这个就好了：

OnClickListener leftliener = new OnClickListener()        {            @Override            public void onClick(View v)            {                Dialog dialog = new Dialog(youActivity.this);                dialog.setTitle("测试左边");                dialog.setCancelable(true);                dialog.show();            }        };        nav.setOnClickListener(0, leftliener);                OnClickListener rightliener = new OnClickListener()        {            @Override            public void onClick(View v)            {                Dialog dialog = new Dialog(youActivity.this);                dialog.setTitle("测试右边");                dialog.setCancelable(true);                dialog.show();            }        };        nav.setOnClickListener(1, rightliener);

8、最后你如果需要更加强大的导航栏，那就只能你自己去完善布局效果了，如有其它方法或者有疑问的欢迎讨论

0 0