本节引言

前面我们已经跟大家讲解了实现底部导航栏的两种方案,但是这两种方案只适合普通的情况,如果
是像新浪微博那样的,想在底部导航栏上的item带有一个红色的小点,然后加上一个消息数目这样,
前面两种方案就显得无力了,我们来看看别人的APP是怎么做的,打开手机的开发者选项,勾选里面的:
显示布局边界,然后打开我们参考的那个App,可以看到底部导航栏是这样的:


从上面这个图我们就可以看出,这种底部导航栏不是简单的TextView或者RadioGroup构成的,
大概布局方案可能是:外层一个LinearLayout,中间一个RelativeLayout,而在中间有一个TextView,
然后再在TextView的右上角有一个红色圆圈背景的TextView或者一个红色的小点;
大概就这样,而这些小点平时的时候应该设置的不可见,当收到信息推送,即有相关类别信息的
时候再可见,并且显示对应的信息数目!那么下面我们就来实现下这种底部导航栏的效果,
另外,为了方便演示,这里就不演示Fragment的切换效果了!另外顺道复习下Fragment获得Activity
中的组件的知识点!


1.实现效果图:

为了方便理解,这里通过点击按钮的形式,模拟收到推送信息,然后显示红色点!

运行效果图:

2.实现流程:

好的,接下来我们就来实现上面这个效果~

Step 1:相关资源文件的准备:

和前面一样,准备好drawable系列的资源:

文字资源:tab_menu_text.xml



    
    

图标资源:tab_menu_better.xml



    
    

照着把其他三个也撸出来~!


Step 2:编写activity的布局代码:

因为四个选项的TextView以及右上角的红点数字属性都差不多,如下:

 
                

我们将他们抽取出来,写到style.xml里:





然后开始编写我们的activity.xml布局:




    

        

        

    


    

        

            

                

                
            
        

        

            

                

                
            
        


        

            

                

                
            
        


        

            

                

                

            
        

    

    


    




Step 3:编写Fragment界面布局以及类

Fragment布局由四个普通按钮构成:

fg_my.xml:




    

接着是自定义的Fragment类,这里的话我们通过getActivity.findViewById()来获得Activity
中的小红点,这里仅仅是简单的控制显示而已!
MyFragment.java:

public class MyFragment extends Fragment implements View.OnClickListener{

    private Context mContext;
    private Button btn_one;
    private Button btn_two;
    private Button btn_three;
    private Button btn_four;

    public MyFragment() {

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_my,container,false);
        //UI Object
        btn_one = (Button) view.findViewById(R.id.btn_one);
        btn_two = (Button) view.findViewById(R.id.btn_two);
        btn_three = (Button) view.findViewById(R.id.btn_three);
        btn_four = (Button) view.findViewById(R.id.btn_four);
        //Bind Event
        btn_one.setOnClickListener(this);
        btn_two.setOnClickListener(this);
        btn_three.setOnClickListener(this);
        btn_four.setOnClickListener(this);
        return view;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_one:
                TextView tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
                tab_menu_channel_num.setText("11");
                tab_menu_channel_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_two:
                TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
                tab_menu_message_num.setText("20");
                tab_menu_message_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_three:
                TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
                tab_menu_better_num.setText("99+");
                tab_menu_better_num.setVisibility(View.VISIBLE);
                break;
            case R.id.btn_four:
                ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
                tab_menu_setting_partner.setVisibility(View.VISIBLE);
                break;
        }
    }
}

Step 4:编写MainActivity

我们在这里完成主要的逻辑实现,有些部分和前面TextView实现底部导航栏的效果类似,
就不具体讲解了,代码如下:

MainActivity.java

/**
 * Created by Coder-pig on 2015/8/30 0030.
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //Activity UI Object
    private LinearLayout ly_tab_menu_channel;
    private TextView tab_menu_channel;
    private TextView tab_menu_channel_num;
    private LinearLayout ly_tab_menu_message;
    private TextView tab_menu_message;
    private TextView tab_menu_message_num;
    private LinearLayout ly_tab_menu_better;
    private TextView tab_menu_better;
    private TextView tab_menu_better_num;
    private LinearLayout ly_tab_menu_setting;
    private TextView tab_menu_setting;
    private ImageView tab_menu_setting_partner;
    private FragmentManager fManager;
    private FragmentTransaction fTransaction;
    private MyFragment fg1;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
        ly_tab_menu_channel.performClick();
        fg1 = new MyFragment();
        fManager = getFragmentManager();
        fTransaction = fManager.beginTransaction();
        fTransaction.add(R.id.ly_content, fg1).commit();

    }

    private void bindViews() {
        ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
        tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
        tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
        ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
        tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
        tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
        ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
        tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
        tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
        ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
        tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
        tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);

        ly_tab_menu_channel.setOnClickListener(this);
        ly_tab_menu_message.setOnClickListener(this);
        ly_tab_menu_better.setOnClickListener(this);
        ly_tab_menu_setting.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ly_tab_menu_channel:
                setSelected();
                tab_menu_channel.setSelected(true);
                tab_menu_channel_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_message:
                setSelected();
                tab_menu_message.setSelected(true);
                tab_menu_message_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_better:
                setSelected();
                tab_menu_better.setSelected(true);
                tab_menu_better_num.setVisibility(View.INVISIBLE);
                break;
            case R.id.ly_tab_menu_setting:
                setSelected();
                tab_menu_setting.setSelected(true);
                tab_menu_setting_partner.setVisibility(View.INVISIBLE);
                break;
        }
    }

    //重置所有文本的选中状态
    private void setSelected() {
        tab_menu_channel.setSelected(false);
        tab_menu_message.setSelected(false);
        tab_menu_better.setSelected(false);
        tab_menu_setting.setSelected(false);
    }


}

好的,至此,就大功告成了~


3.代码下载:

FragmentDemo3.zipFragmentDemo3.zip下载


4.本节小结:

好的,本节相比前面两节稍微复杂了一点,不过还是比较容易弄懂的!
另外,关于实现普通底部导航栏的实现例子就写这么多吧,下一节开始我们来写下
在此基础上的根据手势操作切换页面的例子,嗯,就说这么多,谢谢~