如何在XML佈局中添加選項卡和工具欄

Question

我剛剛創建了一個簡單的網格視圖，我想在網格視圖頁面中添加一個選項卡布局和一個工具欄作爲工具欄和選項卡布局顯示在網格的正面查看它看起來像這樣這是我的XML代碼

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    tools:context=".MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

     <!-- To scroll these tab, use app:tabMode="scrollable" --> 
     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.AppBarLayout> 

    <GridView 
     android:id="@+id/gridView1" 
     android:layout_width="fill_parent" 
     android:background="#d2d2d2" 
     android:layout_height="fill_parent" 
     android:layout_margin="4dp" 
     android:columnWidth="80dp" 
     android:gravity="center" 
     android:horizontalSpacing="5dp" 
     android:numColumns="auto_fit" 
     android:stretchMode="columnWidth" > 
    </GridView> 

</RelativeLayout> 

Answer 1

請嘗試使用以下步驟。希望你的問題能夠解決。若要將網格視圖右側下coordinatorLayout我已經修改XML文件

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="themovie.com.javarank.materialdesignpractice.MainActivity"> 
    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/coordinatorLayout" 
     > 
     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.CoordinatorLayout> 
    <GridView 
     android:id="@+id/gridView1" 
     android:layout_width="match_parent" 
     android:background="#d2d2d2" 
     android:layout_height="wrap_content" 
     android:layout_margin="4dp" 
     android:columnWidth="80dp" 
     android:gravity="center" 
     android:horizontalSpacing="5dp" 
     android:numColumns="auto_fit" 
     android:stretchMode="columnWidth" 
     android:layout_below="@+id/coordinatorLayout" 
     > 
    </GridView> 
</RelativeLayout> 

現在通過使用您的圖像將顯示其創建網格視圖自定義佈局。我把它命名爲grid_view_custom_layout

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/imageView" 
     /> 
</LinearLayout> 

我們表明，我們需要通過擴展BaseAdapter類來創建自定義適配器類將數據添加你需要提供執行的一些方法。 我有一個名爲類作爲GridViewAdapter

import android.content.Context; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.ImageView; 

import java.util.ArrayList; 
import java.util.List; 



public class GridViewAdapter extends BaseAdapter { 

    private Context context; 
    private List<Integer> images = new ArrayList<Integer>(); 

    public GridViewAdapter(Context context, List<Integer> images){ 
     this.context = context; 
     this.images = images; 
    } 


    @Override 
    public int getCount() { 
     return images.size(); 
    } 

    @Override 
    public Object getItem(int i) { 
     return null; 
    } 

    @Override 
    public long getItemId(int i) { 
     return 0; 
    } 

    private static final class ViewHolder { 
     private ImageView imageView; 
    } 


    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     ViewHolder holder; 
     if(convertView == null) { 
      LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      convertView = inflater.inflate(R.layout.grid_view_custom_layout, null, true); 
      holder = new ViewHolder(); 
      holder.imageView = (ImageView) convertView.findViewById(R.id.imageView); 
      convertView.setTag(holder); 
     } else { 
      holder = (ViewHolder) convertView.getTag(); 
     } 
     holder.imageView.setImageResource(images.get(position)); 

     return convertView; 
    } 
} 

我們初始化GridViewAdapter我們需要上下文和整數的集合。

要獲取上下文，只需調用getApplicationContext（）並設置Integer的集合。爲了構建Integer的集合，我使用了可繪製文件夾中的一些圖像。你將需要使用你的圖片。代碼在這裏。

import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.support.v7.widget.Toolbar; 
import android.widget.GridView; 

import java.util.ArrayList; 


public class MainActivity extends AppCompatActivity { 

    private Toolbar myToolBar; 

    private GridView gridView1; 


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

     ArrayList<Integer> images = new ArrayList<Integer>(); 
     images.add(R.drawable.image); 
     images.add(R.drawable.image2); 
     images.add(R.drawable.image3); 
     images.add(R.drawable.image); 
     images.add(R.drawable.image2); 
     images.add(R.drawable.image3); 
     images.add(R.drawable.image); 
     images.add(R.drawable.image2); 
     images.add(R.drawable.image3); 

     GridViewAdapter adapter = new GridViewAdapter(getApplicationContext(), images); 
     gridView1 = (GridView) findViewById(R.id.gridView1); 
     gridView1.setAdapter(adapter); 

    } 
} 

如果解決了您的問題，請將其標記爲解決方案。

Answer 2

如果你想使用AppBarLayout正常，你必須使用一個android.support.design.widget.CoordinatorLayout作爲父母的佈局。

然後您需要將app:layout_behavior="@string/appbar_scrolling_view_behavior"添加到您的GridView。另外不要忘記使用NoActionBar -Theme爲您的Activity。

對於標籤我會使用ViewPager與FragmentStatePagerAdapter。只要將GridView到一個單獨的片段佈局文件（顯然app:layout_behavior應該被移到ViewPager）和加載不同的Fragment有給你的標籤，這樣的：

public class MyAdapter extends FragmentStatePagerAdapter { 
    public MyAdapter(FragmentManager fm) { 
     super(fm); 
    } 

    @Override 
    public int getCount() { 
     return 3; 
    } 

    @Override 
    public Fragment getItem(int position) { 
     switch(position) { 
      case 0: case 1: 
       return new GridFragment(); 
      default: 
       return new OtherFragment(); 
     } 
    } 
} 

現在你可以重用GridView，並使用不同的佈局爲其他選項卡。 欲瞭解更多信息，請參閱Android Developer References。