Android studio 基本布局-底部按鈕

在使用Android studio 的時候，准備弄的基本的布局出來，底部按鈕，按了中間會顯示。

來上代碼:

頁面menu_main.xml

這里弄控件的浮動耗費了點我的時間。原因是因為對其各種問題，

后來發現個好用的屬性 

這里控件FrameLayout的屬性：表示

app:layout_constraintTop_toBottomOf="@+id/relativeLayout1" 頂部對其到relativeLayout1底部

app:layout_constraintBottom_toTopOf="@+id/linearLayout2" 底部對其到linearLayout2的頂部

加上之后，每一個區域都能很好的和前后的銜接好。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MenuActivity">


    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout3"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside">

        <View
            android:id="@+id/view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_light" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="267dp"
            android:layout_height="53dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_marginStart="76dp"
            android:gravity="center"
            android:text="信息"
            android:textSize="30sp" />
    </RelativeLayout>

    <FrameLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@android:color/holo_purple"
        app:layout_constraintTop_toBottomOf="@+id/relativeLayout1"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout2"
        >

    </FrameLayout>


    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="發現" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="我的" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="我的" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="設置" />

    </LinearLayout>

    <!--  <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_orange_dark">

    </FrameLayout>-->


</android.support.constraint.ConstraintLayout>

　上面的效果圖：

 下面來實現點擊底部按鈕，切換中間的內容頁面：

添加一個背景xml，控制選擇后的變化

menu_button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true">
        <shape>
            <solid android:color="#FFC4C4C4"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@android:color/holo_blue_bright" />
        </shape>
    </item>

</selector>

在按鈕的樣式上，將樣式添加menu_main.xml 到 進去：

        <TextView
            android:id="@+id/textView9"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/menu_button_bg"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="關於" />

創建一個類，控制view的初始化：

package com.example.administrator.myapplication.until;

import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.os.Bundle;
import com.example.administrator.myapplication.R;

public class FirstFragment extends Fragment {
    private String context="xxxxxxxxxxxxx";
    private TextView mTextView;
    public  FirstFragment(){

    }
    public  static FirstFragment newInstance(String context){
        FirstFragment myFragment = new FirstFragment();
        myFragment.context = context;
        return  myFragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        this.context = context;
        View view = inflater.inflate(R.layout.found_main,container,false);
        mTextView = (TextView)view.findViewById(R.id.textView6);
        //mTextView = (TextView)getActivity().findViewById(R.id.txt_content);
        mTextView.setText(context);
        mTextView.setBackgroundColor(20);
        return view;
    }
}

在menu頁面添加監聽時間，監聽選項的點擊，然后進行邏輯的執行 代碼：

package com.example.administrator.myapplication;

import android.app.Activity;
import android.app.FragmentTransaction;
import android.content.Intent;
import android.os.Bundle;
import android.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.example.administrator.myapplication.until.FirstFragment;

import java.util.Timer;
import java.util.TimerTask;

public class MenuActivity extends Activity implements View.OnClickListener{
    String msg = "Android : ";
    //繼承Activity 不會顯示APP頭上的標題
    private TextView topfound;
    private TextView tabmy;
    private TextView tababout;
    private TextView tabsetting;

    private FrameLayout ly_content;

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d(msg, "StartActivity-onCreate: ");
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        //配置加載的xml頁面
        setContentView(R.layout.menu_main);

        bindView();
    }


    //UI組件初始化與事件綁定
    private void bindView() {
        topfound = (TextView)this.findViewById(R.id.textView6);
        tabmy = (TextView)this.findViewById(R.id.textView7);
        tababout = (TextView)this.findViewById(R.id.textView8);
        tabsetting = (TextView)this.findViewById(R.id.textView9);
       // tabMore = (TextView)this.findViewById(R.id.txt_more);
        ly_content = (FrameLayout) findViewById(R.id.linearLayout3);

        topfound.setOnClickListener(this);
        tabmy.setOnClickListener(this);
        tababout.setOnClickListener(this);
        tabsetting.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //FragmentTransaction transaction = getFragmentManager().beginTransaction();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        hideAllFragment(transaction);
        switch(v.getId()){
            case R.id.textView6:
                selected();
                topfound.setSelected(true);
                if(f1==null){
                    f1 = FirstFragment.newInstance("發現");
                    transaction.add(R.id.linearLayout3,f1);
                }else{
                    transaction.show(f1);
                }
                break;

            case R.id.textView7:
                selected();
                tabmy.setSelected(true);
                if(f2==null){
                    f2 =FirstFragment.newInstance("我的");//"第二個Fragment"
                    transaction.add(R.id.linearLayout3,f2);
                }else{
                    transaction.show(f2);
                }
                break;

            case R.id.textView8:
                selected();
                tababout.setSelected(true);
                if(f3==null){
                    f3 = FirstFragment.newInstance("關於");//"第三個Fragment"
                    transaction.add(R.id.linearLayout3,f3);
                }else{
                    transaction.show(f3);
                }
                break;

            case R.id.textView9:
                selected();
                tabsetting.setSelected(true);
                if(f4==null){
                    f4 =  FirstFragment.newInstance("設置");//"第四個Fragment"
                    transaction.add(R.id.linearLayout3,f4);
                }else{
                    transaction.show(f4);
                }
                break;
        }

        transaction.commit();
        Log.d(msg, "xxxxx ");
    }

    //重置所有文本的選中狀態
    public void selected(){
        topfound.setSelected(false);
        tabmy.setSelected(false);
        tababout.setSelected(false);
        tabsetting.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);
        }
    }
}

創建一個頁面，用來展示選擇的選項的內容found_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FoundActivity">

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#de3679"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:text="發現" />



    </LinearLayout>


</android.support.constraint.ConstraintLayout>

效果圖：

 這里會發現默認進來的時候，是原來這是的menu 的頁面，如果要默認進來就是發現頁面的話，需要加點代碼:

在初始化加載的時候，讓發現頁面也加載。見下面的 SetDefultView 方法

package com.example.administrator.myapplication;

import android.app.Activity;
import android.app.FragmentTransaction;
import android.content.Intent;
import android.os.Bundle;
import android.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.example.administrator.myapplication.until.FirstFragment;

import java.util.Timer;
import java.util.TimerTask;

public class MenuActivity extends Activity implements View.OnClickListener{
    String msg = "Android : ";
    //繼承Activity 不會顯示APP頭上的標題
    private TextView topfound;
    private TextView tabmy;
    private TextView tababout;
    private TextView tabsetting;

    private FrameLayout ly_content;

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Log.d(msg, "StartActivity-onCreate: ");
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        //配置加載的xml頁面
        setContentView(R.layout.menu_main);

        bindView();
    }


    //UI組件初始化與事件綁定
    private void bindView() {
        topfound = (TextView)this.findViewById(R.id.textView6);
        tabmy = (TextView)this.findViewById(R.id.textView7);
        tababout = (TextView)this.findViewById(R.id.textView8);
        tabsetting = (TextView)this.findViewById(R.id.textView9);
       // tabMore = (TextView)this.findViewById(R.id.txt_more);
        ly_content = (FrameLayout) findViewById(R.id.linearLayout3);

        //首頁設定
        SetDefultView();
        
        topfound.setOnClickListener(this);
        tabmy.setOnClickListener(this);
        tababout.setOnClickListener(this);
        tabsetting.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //FragmentTransaction transaction = getFragmentManager().beginTransaction();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        hideAllFragment(transaction);
        switch(v.getId()){
            case R.id.textView6:
                selected();
                topfound.setSelected(true);
                if(f1==null){
                    f1 = FirstFragment.newInstance("發現");
                    transaction.add(R.id.linearLayout3,f1);
                }else{
                    transaction.show(f1);
                }
                break;

            case R.id.textView7:
                selected();
                tabmy.setSelected(true);
                if(f2==null){
                    f2 =FirstFragment.newInstance("我的");//"第二個Fragment"
                    transaction.add(R.id.linearLayout3,f2);
                }else{
                    transaction.show(f2);
                }
                break;

            case R.id.textView8:
                selected();
                tababout.setSelected(true);
                if(f3==null){
                    f3 = FirstFragment.newInstance("關於");//"第三個Fragment"
                    transaction.add(R.id.linearLayout3,f3);
                }else{
                    transaction.show(f3);
                }
                break;

            case R.id.textView9:
                selected();
                tabsetting.setSelected(true);
                if(f4==null){
                    f4 =  FirstFragment.newInstance("設置");//"第四個Fragment"
                    transaction.add(R.id.linearLayout3,f4);
                }else{
                    transaction.show(f4);
                }
                break;
        }

        transaction.commit();
        Log.d(msg, "xxxxx ");
    }

    //重置所有文本的選中狀態
    public void selected(){
        topfound.setSelected(false);
        tabmy.setSelected(false);
        tababout.setSelected(false);
        tabsetting.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);
        }
    }

    public  void  SetDefultView(){
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        hideAllFragment(transaction);
        selected();
        if(f1==null){
            f1 = FirstFragment.newInstance("發現");
            transaction.add(R.id.linearLayout3,f1);
        }else{
            transaction.show(f1);
        }
        topfound.setSelected(true);
        transaction.commit();

    }
}

效果：

以上源碼：鏈接：https://pan.baidu.com/s/1RlkTStyR7oihr7mAgtWZMg 密碼：puug

 

 還有一種方法：在Android Studio 新建項目的時候，可以選擇底部導航欄 Bottom Navigaton 去實現，更加的簡單和好用

可以去看里面的代碼實現，這個我覺得挺方便的。就不細說了，

https://blog.csdn.net/xiaoyangsavvy/article/details/70213537

這個博客寫的挺好的