android 封装好的BottomTabBar

来源：互联网发布：欠淘宝贷款2年了没还上编辑：程序博客网时间：2024/05/29 00:33

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:

[java] view plaincopy
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 形式）

[java] view plaincopy
<?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

[java] view plaincopy
<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

//--------------------------------------------------------------------------------------下面看看凸起是怎么弄的---------------------------------------------------------------------------------

凸起也是自己定义了一个 ImageView, 这个ImageView 的背景就是绘制半个圆弧。。。“拱形”

[java] view plaincopy
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);  
    }  
}  

2 0