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