1 在android app開發過程中，會發現很多App的底部（頂部一樣） 會仿效IPHONE的設計。。做一個導航。 如下圖黑色部分：
（這個是實作效果） 這個是設計原型
1.1 要是中間部分沒有那個拱起來的部分，那麼可能設計還簡單一些。。 仔細分析下設計原型，，，中間那個 搖搖 的圖示要大一些，而且和其他圖示沒在一個水準線上。
1.2 總的思想就是 先封裝一個 沒有 凸起 的通用，自動适配的組建。。。然後。。。在上面 通過 FrameLayout 放置一個 突起的組建。。。
1.3 設計細節
1.3.1 自己寫一個 BottomTabBar (extends) LinearLayout . 通過 Inflater 加載一個 自定義的 View (通過xml配置)， 在View 的xml 中，注意書寫好适配就OK了。
注意 layout_weight 的使用。（參見上一篇 listview）
自定義LinearLayout:
package com.dp.android.widget;
import com.dp.android.elong.shake.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
public class BottomTabBar extends LinearLayout {
//--implements two kinds of constructions--
public BottomTabBar(Context context) {
super(context);
init(context);
}
public BottomTabBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
setLayoutParams(lp);
LayoutInflater mInflater = LayoutInflater.from(context);
View v = mInflater.inflate(R.layout.bottom_tabs, null);
addView(v,lp);
}
}
自定義的View（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="fill_parent"
>
<!-- 搜尋 -->
<LinearLayout
android:id="@+id/ll_bottom_tabls_search"
style = "@style/bottom_tabs_ll"
>
<ImageView
android:id="@+id/im_search"
style = "@style/bottom_tabs_image"
android:src="@drawable/bottom_tab_search" />
<TextView
style = "@style/bottom_tabs_tv"
android:text="@string/bottom_tab_search"
/>
</LinearLayout>
<!-- 搖過 -->
<LinearLayout
android:id="@+id/ll_bottom_tabls_history"
style = "@style/bottom_tabs_ll"
>
<ImageView
android:id="@+id/im_history"
style = "@style/bottom_tabs_image"
android:src="@drawable/bottom_tab_history" />
<TextView
style = "@style/bottom_tabs_tv"
android:text="@string/bootom_tab_shake"
/>
</LinearLayout>
<!-- 換一個 -->
<LinearLayout
android:id="@+id/ll_bottom_tabls_change"
style = "@style/bottom_tabs_ll"
>
<ImageView
android:id="@+id/im_change"
style = "@style/bottom_tabs_image"
android:src="@drawable/bottom_tab_blank"
/>
<TextView
style = "@style/bottom_tabs_tv"
android:text="@string/bottom_tab_change"
/>
</LinearLayout>
<!-- 收藏 -->
<LinearLayout
android:id="@+id/ll_bottom_tabls_collection"
style = "@style/bottom_tabs_ll"
>
<ImageView
android:id="@+id/im_collection"
style = "@style/bottom_tabs_image"
android:src="@drawable/bottom_tab_collection"
/>
<TextView
style = "@style/bottom_tabs_tv"
android:text="@string/bootom_tab_collection"
/>
</LinearLayout>
<!-- 更多 -->
<LinearLayout
android:id="@+id/ll_bottom_tabls_more"
style = "@style/bottom_tabs_ll"
>
<ImageView
android:id="@+id/im_more"
style = "@style/bottom_tabs_image"
android:src="@drawable/bottom_tab_more"
/>
<TextView
style = "@style/bottom_tabs_tv"
android:text="@string/bootom_tab_more"
/>
</LinearLayout>
</LinearLayout>
view 中用到的 三個 style
<style name="bottom_tabs_ll" >
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@color/black</item>
<item name="android:orientation">vertical</item>
<item name="android:gravity">center</item>
<item name="android:layout_gravity">bottom</item>
<item name="android:layout_weight">1</item>
</style>
<style name="bottom_tabs_image" >
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">5dip</item>
</style>
<style name="bottom_tabs_tv" >
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/common_white</item>
<item name="android:paddingTop">3dip</item>
<item name="android:gravity">center</item>
</style>
//---------------------------------------------------------------下面是如何使用自己定義的 組建了-------------------------------------
1: 注意 BottomTabBar ，，， 這裡面還用到了自定義的 “凸起” 元件。 MyBottmArc
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/shake_yellow_bg"
android:orientation="vertical"
>
<com.dp.android.widget.BottomTabBar
android:id="@+id/bottom_tab_bar1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="30dip"
/>
<com.dp.android.widget.MyBottmArc
android:id="@+id/im_change"
android:layout_width="80dip"
android:layout_height="60dip"
android:padding="15dip"
android:src="@drawable/bottom_tab_search"
android:layout_gravity="top|center_horizontal"
/>
</FrameLayout>
//--------------------------------------------------------------------------------------下面看看 凸起 是怎麼弄的---------------------------------------------------------------------------------
凸起 也是自己定義了一個 ImageView, 這個ImageView 的背景 就是繪制半個 圓弧。。。“拱形”
package com.dp.android.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;
public class MyBottmArc extends ImageView {
private static Paint paint = new Paint();
public MyBottmArc(Context context) {
super(context);
}
public MyBottmArc(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyBottmArc(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
protected void onDraw(Canvas canvas) {
Rect m_rect = canvas.getClipBounds();
canvas.save();
paint.setColor(0xff000000);
float m_left = m_rect.left;
float m_top = m_rect.top;
float m_right = m_rect.right;
float m_bottom = (1.2f)*(m_rect.bottom);
RectF m_rectf = new RectF(m_left,m_top,m_right,m_bottom);
canvas.drawOval(m_rectf, paint);
canvas.restore();
super.onDraw(canvas);
}
}