使用带有GridLayoutManager的RecyclerView为手机和平板电脑添加动态按钮到不同的布局 [英] Adding Dynamic Buttons to different layouts for phone and tablet using RecyclerView with GridLayoutManager

问题描述

我正在向布局添加动态按钮。每个按钮一次添加一个，如果根据用户的操作添加了新的按钮，则布局必须自动更新。因此，根据用户的操作，布局可能有3个按钮，或16个，或任何。并且可以在不同的时间添加按钮。所以如果用户打开应用程序并添加一个按钮，然后离开并返回到应用程序并添加另一个按钮，旧的必须保留。

我希望将按钮逐个添加到如下布局中：

我已经看了一下如何做到这一点，建议我使用带有GridLayoutManager的RecyclerView。我把它添加到我的代码，但是问题是当我添加一个按钮，然后如果我添加另一个按钮，第二个添加在第一个。所以如果用户操作说16个按钮应该做，我只是得到16个按钮在彼此的顶部，而不是在我想要的布局。

这是我的代码：

启动RecyclerView的主要片段：我有另一个活动它启动createButton方法并传递一个drawable和string。这些可绘制和字符串将根据用户的操作一次传递给此方法，并一次创建一个图像按钮

  public class MyFragment extends Fragment {
 
 private GridLayoutManager lLayout; 
 
 
 
 @Override 
 public void onCreate（Bundle savedInstanceState）{
 super.onCreate（savedInstanceState）; 
 
 
 
 
 
 // onCreateView 
 @Override 
 public View onCreateView（LayoutInflater inflater，ViewGroup容器，Bundle savedInstanceState ）{
查看视图= inflater.inflate（R.layout.my_fragment，container，false）; 
 
 
 //创建一个空列表来初始化适配器（或者获取nullPointerException错误）
列表< ItemObject> myList = new ArrayList< ItemObject>（）; 
 
 
 lLayout = new GridLayoutManager（getActivity（），4，GridLayoutManager.HORIZONTAL，false）; 
 
 RecyclerView rView =（RecyclerView）view.findViewById（R.id.recycler_view）; 
 
 rView.setHasFixedSize（true）; 
 rView.setLayoutManager（lLayout）; 
 
 RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter（getActivity（），myList）; 
 rView.setAdapter（rcAdapter）; 
 
 
返回视图; 
} 
 
 
 
 
私人列表< ItemObject> getAllItemList（String applicationName，Drawable app_drawable）{
 
列表< ItemObject> allItems = new ArrayList< ItemObject>（）; 
 allItems.add（new ItemObject（applicationName，app_drawable））; 
 
 
返回allItems; 
} 
 
 
 
 
 
 public void createButton（Drawable d，String appName）{
 
列表& ItemObject> rowListItem = getAllItemList（appName，d）; 
 lLayout = new GridLayoutManager（getActivity（），2，GridLayoutManager.HORIZONTAL，false）; 
 
 
 
 
 RecyclerView rView =（RecyclerView）getView（）。findViewById（R.id.recycler_view）; 
 rView.setHasFixedSize（true）; 
 rView.setLayoutManager（lLayout）; 
 
 RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter（getActivity（），rowListItem）; 
 rView.setAdapter（rcAdapter）; 
 
} 
 
 
} 
  

这里是RecyclerViewHolders：

  public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener {
 
 public TextView AppName; 
 public ImageButton AppButton; 
 
 public RecyclerViewHolders（View itemView）{
 super（itemView）; 
 itemView.setOnClickListener（this）; 
 AppName =（TextView）itemView.findViewById（R.id.new_app_name）; 
 AppButton =（ImageButton）itemView.findViewById（R.id.new_app_button）; 
} 
 
 @Override 
 public void onClick（View v）{
 
} 
} 
  

RecyclerViewAdapter

  public class RecyclerViewAdapter extends RecyclerView.Adapter< RecyclerViewHolders> {
 
 private List< ItemObject> itemList中; 
 private Context context; 
 
 public RecyclerViewAdapter（Context context，List< ItemObject> itemList）{
 this.itemList = itemList; 
 this.context = context; 
} 
 
 @Override 
 public RecyclerViewHolders onCreateViewHolder（ViewGroup parent，int viewType）{
 
查看layoutView = LayoutInflater.from（parent.getContext（） ）.inflate（R.layout.home_fragment，null）; 
 RecyclerViewHolders rcv = new RecyclerViewHolders（layoutView）; 
 return rcv; 
} 
 
 @Override 
 public void onBindViewHolder（RecyclerViewHolders holder，int position）{
 holder.AppName.setText（itemList.get（position）.getName（） ）; 
 holder.AppButton.setImageDrawable（itemList.get（position）.getPhoto（））; 
} 
 
 @Override 
 public int getItemCount（）{
 return this.itemList.size（）; 
} 
} 
  

ItemObject

  public class ItemObject {
 
 private String name; 
 private Drawable d; 
 
 public ItemObject（String name，Drawable d）{
 this.name = name; 
 this.d = d; 
} 
 
 public String getName（）{
 return name; 
} 
 
 public void setName（String name）{
 this.name = name; 
} 
 
 public Drawable getPhoto（）{
 return d; 
} 
 
 public void setPhoto（Drawable d）{
 this.d = d; 
} 
} 
  

和我的布局（my_fragment） strong>

 < LinearLayout xmlns：android =http://schemas.android.com/apk/res/android 
 android：layout_width =match_parent
 android：layout_height =match_parent
 android：gravity =center_horizo​​ntal
 android：layout_marginTop =15dp
 android： id =@ + id / my_fragment
> 
 
 
< android.support.v7.widget.RecyclerView 
 android：id =@ + id / recycleler_view
 android：layout_width =wrap_content
 android：layout_height =wrap_content
 android：scrollbars =horizo​​ntal/> 
 
< RelativeLayout 
 android：layout_width =match_parent
 android：layout_height =match_parent> 
 
 
< ImageButton 
 android：layout_width =wrap_content
 android：layout_height =wrap_content
 android：id =@ + id / new_app_button
 /> 
 
< TextView 
 android：layout_width =wrap_content
 android：layout_height =wrap_content
 android：id =@ + id / new_app_name
 android：gravity =center
 android：layout_below =@ + id / new_app_button
 
 /> 
 
 
< / RelativeLayout> 
< / LinearLayout> 
  

ANSWER：

这里是如何在手机和平​​板电脑上显示不同的布局（手机上有2行，平板电脑上有3行）

此代码已添加到MyFragment的onCreateView方法

  //获取屏幕尺寸，以便我们可以为手机和平板电脑使用不同的布局
 int screenSize = getResources（）。getConfiguration（）。screenLayout& 
 Configuration.SCREENLAYOUT_SIZE_MASK; 
 
 String toastMsg; 
 switch（screenSize）{
 case Configuration.SCREENLAYOUT_SIZE_LARGE：
 toastMsg =Large screen; 
 Log.d（tag_name，大屏幕）; 
 break; 
 case Configuration.SCREENLAYOUT_SIZE_NORMAL：
 toastMsg =Normal screen; 
 Log.d（tag_name，普通屏幕）; 
 break; 
 case Configuration.SCREENLAYOUT_SIZE_SMALL：
 toastMsg =Small screen; 
 Log.d（tag_name，小屏幕）; 
 break; 
默认值：
 toastMsg =屏幕尺寸既不大，正常或小; 
 Log.d（tag_name，屏幕尺寸不大，正常或小）; 
} 
 Toast.makeText（getActivity（），toastMsg，Toast.LENGTH_LONG）.show（）; 
 
 
 
 
 //创建一个空列表来初始化适配器（否则得到nullPointerException错误）
列表< ItemObject> myList = new ArrayList< ItemObject>（）; 
 
 
 if（screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE 
 || screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE）{
 lLayout = new GridLayoutManager（getActivity（），3，GridLayoutManager .HORIZONTAL，false）; 
} 
 
 else lLayout = new GridLayoutManager（getActivity（），2，GridLayoutManager.HORIZONTAL，false）; 
  

解决方案

您可以使用answer 。

如果屏幕尺寸为配置。 SCREENLAYOUT_SIZE_LARGE 或 Configuration.SCREENLAYOUT_SIZE_XLARGE 然后它可能是平板电脑。

 code> int spanCount = 2; 
 if（screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE 
或screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE）{
 spanCount = 3; 
} 
  

I am adding dynamic buttons to a layout. Each button is added one at a time, and the layout must update itself if new buttons were added based on a user's action. So the layout could have 3 buttons, or 16, or whatever, depending on the user's action. And the buttons can be added at different times. So if the user opens the app and adds a button, then leaves and returns to the app and adds another button, the old one must remain.

I want my buttons to be added, one by one, into a layout like this:

I have looked around about how to do this, and it was recommended to me that I use a RecyclerView with a GridLayoutManager. I have added this to my code, but the problem is that when I add a button, and then if I add another button, the second one is added on top of the first. So if the user action says that 16 buttons should be made, I am just getting 16 buttons on top of each other and not in the layout that I want.

Here is my code:

My Main Fragment that Initiates the RecyclerView: I have another activity that initiates "createButton" method and passes a drawable and string. These drawables and strings are passed to this method one at a time based on the user's action, and create an image button one at a time

public class MyFragment extends Fragment {

private GridLayoutManager lLayout;



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);



}

// onCreateView
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.my_fragment, container, false);


    // Create an empty list to initialize the adapter (or else get nullPointerException error)
    List<ItemObject> myList = new ArrayList<ItemObject>();


    lLayout = new GridLayoutManager(getActivity(), 4, GridLayoutManager.HORIZONTAL, false);

    RecyclerView rView = (RecyclerView)view.findViewById(R.id.recycler_view);

    rView.setHasFixedSize(true);
    rView.setLayoutManager(lLayout);

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(getActivity(),myList);
    rView.setAdapter(rcAdapter);


    return view;
}




private List<ItemObject> getAllItemList(String applicationName, Drawable app_drawable){

    List<ItemObject> allItems = new ArrayList<ItemObject>();
    allItems.add(new ItemObject(applicationName, app_drawable));


    return allItems;
}





public void createButton (Drawable d, String appName){

    List<ItemObject> rowListItem = getAllItemList(appName, d);
    lLayout = new GridLayoutManager(getActivity(), 2, GridLayoutManager.HORIZONTAL, false);




    RecyclerView rView = (RecyclerView)getView().findViewById(R.id.recycler_view);
    rView.setHasFixedSize(true);
    rView.setLayoutManager(lLayout);

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(getActivity(), rowListItem);
    rView.setAdapter(rcAdapter);

}


}

Here is RecyclerViewHolders:

public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{

public TextView AppName;
public ImageButton AppButton;

public RecyclerViewHolders(View itemView) {
    super(itemView);
    itemView.setOnClickListener(this);
    AppName = (TextView)itemView.findViewById(R.id.new_app_name);
    AppButton = (ImageButton)itemView.findViewById(R.id.new_app_button);
}

@Override
public void onClick(View v) {

}
}

RecyclerViewAdapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private List<ItemObject> itemList;
private Context context;

public RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
    this.itemList = itemList;
    this.context = context;
}

@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.home_fragment, null);
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView);
    return rcv;
}

@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
    holder.AppName.setText(itemList.get(position).getName());
    holder.AppButton.setImageDrawable(itemList.get(position).getPhoto());
}

@Override
public int getItemCount() {
    return this.itemList.size();
}
}

ItemObject

public class ItemObject {

private String name;
private Drawable d;

public ItemObject(String name, Drawable d) {
    this.name = name;
    this.d = d;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public Drawable getPhoto() {
    return d;
}

public void setPhoto(Drawable d) {
    this.d = d;
}
}

and my layout (my_fragment)

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_marginTop="15dp"
android:id="@+id/my_fragment"
>


<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scrollbars="horizontal" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/new_app_button"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/new_app_name"
    android:gravity="center"
    android:layout_below="@+id/new_app_button"

    />


</RelativeLayout>
</LinearLayout>

ANSWER:

HERE IS HOW I GOT MY LAYOUT TO BE DIFFERENT ON THE PHONE AND TABLET (2 rows on the phone, 3 rows on the tablet)

This code was added to my onCreateView method of MyFragment

 // Get screen size so we can have different layouts for phone and tablet
    int screenSize = getResources().getConfiguration().screenLayout &
            Configuration.SCREENLAYOUT_SIZE_MASK;

    String toastMsg;
    switch(screenSize) {
        case Configuration.SCREENLAYOUT_SIZE_LARGE:
            toastMsg = "Large screen";
            Log.d("tag_name", "Large screen");
            break;
        case Configuration.SCREENLAYOUT_SIZE_NORMAL:
            toastMsg = "Normal screen";
            Log.d("tag_name", "Normal screen");
            break;
        case Configuration.SCREENLAYOUT_SIZE_SMALL:
            toastMsg = "Small screen";
            Log.d("tag_name", "Small screen");
            break;
        default:
            toastMsg = "Screen size is neither large, normal or small";
            Log.d("tag_name", "Screen size is not large, normal, or small");
    }
    Toast.makeText(getActivity(), toastMsg, Toast.LENGTH_LONG).show();




    // Create an empty list to initialize the adapter (or else get nullPointerException error)
    List<ItemObject> myList = new ArrayList<ItemObject>();


    if (screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE
    || screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
        lLayout = new GridLayoutManager(getActivity(), 3, GridLayoutManager.HORIZONTAL, false);
    }

    else lLayout = new GridLayoutManager(getActivity(), 2, GridLayoutManager.HORIZONTAL, false);

解决方案

You can detect screen size with this answer.

If the screen size is Configuration.SCREENLAYOUT_SIZE_LARGE or Configuration.SCREENLAYOUT_SIZE_XLARGE then it maybe a tablet.

  int spanCount = 2;
  if (screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE 
        or screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
    spanCount = 3;
  }

这篇关于使用带有GridLayoutManager的RecyclerView为手机和平板电脑添加动态按钮到不同的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！