So fügen Sie Registerkarten und Symbolleisten im XML-Layout hinzu

Question

Ich habe gerade eine einfache Rasteransicht erstellt. Ich möchte auf der Rasteransichtsseite nur ein Registerkartenlayout und eine Symbolleiste als Symbolleisten- und Registerkartenlayouts vor dem Raster hinzufügen sehen sie wie diese hier ist mein xml-Code

<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

Versuchen Sie den folgenden Schritt. Hoffe, dass dein Problem gelöst wird. Um den Rost Ansicht direkt unter dem coordinatorLayout Ich habe Ihre XML-Datei geändert

<?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> 

Jetzt ein eigenes Layout für Ihre Rasteransicht erstellen, indem Sie die Ihr Bild wird angezeigt. Ich nannte es als 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> 

nun die Daten, die wir durch die Erweiterung der BaseAdapter Klasse eine eigene Adapter Klasse erstellen müssen zeigen, fügen Sie Implementierung einiger Methoden bereitstellen müssen. Ich habe die Klasse als 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; 
    } 
} 

nun die GridViewAdapter initialisieren benannt werden wir Kontext und eine Sammlung von Integer benötigen.

Um den Kontext zu erhalten, rufen Sie einfach getApplicationContext() auf und richten Sie eine Sammlung von Integer ein. Um eine Sammlung von Integer zu erstellen, habe ich einige Bilder aus dem Zeichnungsordner verwendet. Sie müssen Ihre Bilder verwenden. Hier geht der Code.

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); 

    } 
} 

Wenn es Ihr Problem gelöst hat, markieren Sie es bitte als eine Lösung.

Answer 2

sieht Wenn Sie die AppBarLayout richtig müssen Sie eine android.support.design.widget.CoordinatorLayout als Eltern-Layout verwenden verwenden möchten.

Dann müssen Sie app:layout_behavior="@string/appbar_scrolling_view_behavior" zu Ihrem GridView hinzufügen. Vergessen Sie auch nicht, ein NoActionBar-Theme für Ihre Activity zu verwenden.

Für die Registerkarten würde ich eine ViewPager mit einer FragmentStatePagerAdapter verwenden. Bewegen Sie einfach die GridView in ein separates Fragment-Layout-Datei und laden verschiedene Fragment s für Ihre Tabs (offensichtlich die app:layout_behavior sollte auf die ViewPager bewegt werden), wie folgt aus:

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(); 
     } 
    } 
} 

Jetzt können Sie Ihre GridView Wiederverwendung und verwenden verschiedene Layouts für andere Tabs. Weitere Informationen finden Sie unter Android Developer References.