如何在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。