Android导航栏开发漫谈

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