android 封装好的BottomTabBar

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

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

凸起也是自己定义了一个 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);    }}

更多相关文章

随机推荐