利用LinearLayout + TextView实现Android底部导航栏的效果

后期我们将使用导入三方控件的方式,实现android原生扁平化风格的导航栏,这里我们实现的是普通的不具备动画效果的导航栏。
①ps:android studio的mipmap具有更好的优化效果,但是可能对图片的分辨率有所要求,我们这里采用的图片资源为64x64 png格式的图片资源。
图片Drawable资源:tab_menu_deal.xml





文字资源:tab_menu_deal_text.xml





背景资源 tab_menu_bg.xml:



    
        
        
    

    
        
    


编写我们的Activity布局

activity_main.xml:


xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


    

    
    



    

    

    

    

    




    


创建一个Fragment的简单布局与类:

first_fragment.xml:


android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent">



FirstFragment.Java:
public class FirstFragment extends Fragment { private String context; private TextView mTextView; public FirstFragment(String context){ this.context = context; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.first_fragment,container,false); mTextView = (TextView)view.findViewById(R.id.txt_content); //mTextView = (TextView)getActivity().findViewById(R.id.txt_content); mTextView.setText(context); return view; }}


public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private TextView topBar;
private TextView tabDeal;
private TextView tabPoi;
private TextView tabMore;
private TextView tabUser;

private FrameLayout ly_content;

private FirstFragment f1,f2,f3,f4;
private FragmentManager fragmentManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);

    bindView();

}

//UI组件初始化与事件绑定
private void bindView() {
    topBar = (TextView)this.findViewById(R.id.txt_top);
    tabDeal = (TextView)this.findViewById(R.id.txt_deal);
    tabPoi = (TextView)this.findViewById(R.id.txt_poi);
    tabUser = (TextView)this.findViewById(R.id.txt_user);
    tabMore = (TextView)this.findViewById(R.id.txt_more);
    ly_content = (FrameLayout) findViewById(R.id.fragment_container);

    tabDeal.setOnClickListener(this);
    tabMore.setOnClickListener(this);
    tabUser.setOnClickListener(this);
    tabPoi.setOnClickListener(this);

}

 //重置所有文本的选中状态
public void selected(){
    tabDeal.setSelected(false);
    tabMore.setSelected(false);
    tabPoi.setSelected(false);
    tabUser.setSelected(false);
}

 //隐藏所有Fragment
public void hideAllFragment(FragmentTransaction transaction){
    if(f1!=null){
        transaction.hide(f1);
    }
    if(f2!=null){
        transaction.hide(f2);
    }
    if(f3!=null){
        transaction.hide(f3);
    }
    if(f4!=null){
        transaction.hide(f4);
    }
}

@Override
public void onClick(View v) {
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    hideAllFragment(transaction);
    switch(v.getId()){
        case R.id.txt_deal:
            selected();
            tabDeal.setSelected(true);
            if(f1==null){
                f1 = new FirstFragment("第一个Fragment");
                transaction.add(R.id.fragment_container,f1);
            }else{
                transaction.show(f1);
            }
            break;

        case R.id.txt_more:
            selected();
            tabMore.setSelected(true);
            if(f2==null){
                f2 = new FirstFragment("第二个Fragment");
                transaction.add(R.id.fragment_container,f2);
            }else{
                transaction.show(f2);
            }
            break;

        case R.id.txt_poi:
            selected();
            tabPoi.setSelected(true);
            if(f3==null){
                f3 = new FirstFragment("第三个Fragment");
                transaction.add(R.id.fragment_container,f3);
            }else{
                transaction.show(f3);
            }
            break;

        case R.id.txt_user:
            selected();
            tabUser.setSelected(true);
            if(f4==null){
                f4 = new FirstFragment("第四个Fragment");
                transaction.add(R.id.fragment_container,f4);
            }else{
                transaction.show(f4);
            }
            break;
    }

    transaction.commit();
}

}

你可能感兴趣的:(利用LinearLayout + TextView实现Android底部导航栏的效果)