Span dos columnas de gridview más de tres
Espero que alguien me puede ayudar, tengo un diseño de cuadrícula poblado por un adaptador con 8 elementos. Hay tres columnas en la cuadrícula, esto me deja con dos filas con tres columnas llenas y con dos y una vacía vacía al final. He adjuntado imágenes para detallar lo que estoy tratando de lograr. Quiero ser capaz de estirar las columnas de filas de fila última para llenar el ancho de la vista de cuadrícula. Esto está siendo poblado por un adaptador.
A continuación se muestra cómo la aplicación es ahora, tengo contenido en 8 celdas, no hay novena celda en caso de que haya confusión con mi imagen.
- Android gridview expandir animación de elementos
- Altura diferente para cada elemento en GridView
- Evento de ScrollUp y ScrollDown de GridView OnScrollListener de Android
- Cómo hacer que SlidingDrawer sea transparente
- ¿Cómo hacer que la animación de GridView sea como en la aplicación de Google Keep?
Aquí es cómo me gustaría que mirar. Así que me gustaría estirar las dos celdas a través de tres columnas.
A continuación se muestra mi código para lo que he implementado hasta ahora
public class channels_fragment extends Fragment { private View view; private GridView channelsGridView; protected Handler handler; //protected GridAdapter gridAdapter; private Main_Activity main; private final ChannelsModel model = new ChannelsModel(); static final String[] channelTitles = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"}; public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { main = (Main_Activity) this.getActivity(); view = inflater.inflate(R.layout.channels_fragment_layout, null); channelsGridView = (GridView)view.findViewById(R.id.channelsGrid); channelsGridView.setAdapter(new ImageAdapter(this.getActivity(), channelTitles)); channelsGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { } }); return view; } public static int convertDpToPixels(float dp, Context context){ Resources resources = context.getResources(); return (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, dp, resources.getDisplayMetrics() ); } class ImageAdapter extends BaseAdapter{ private Context context; private final String[] channelTitles; public ImageAdapter(Context context, String[] channelTitles){ this.context = context; this.channelTitles = channelTitles; } public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View gridView; if (convertView == null) { gridView = new View(context); // get layout from mobile.xml gridView = inflater.inflate(R.layout.grid_item_layout, null); // set value into textview TextView textView = (TextView) gridView .findViewById(R.id.grid_item_text); textView.setText(channelTitles[position]); // set image based on selected text ImageView imageView = (ImageView) gridView .findViewById(R.id.grid_item_image); ImageView iv = (ImageView) gridView.findViewById(R.id.ver_border_dark); String channelTitle = channelTitles[position]; if (position == 6 ){ gridView.setBackgroundResource(R.drawable.background_bottom_dark); textView.setTextColor(Color.WHITE); } if (position ==7) { gridView.setBackgroundResource(R.drawable.background_bottom_dark); textView.setTextColor(Color.WHITE); iv.setVisibility(View.VISIBLE); iv.setImageResource(R.drawable.grid_line_ondark_vert); } if (channelTitle.equals("test1")) { imageView.setImageResource(R.drawable.icon_events); } else if (channelTitle.equals("test2?")) { imageView.setImageResource(R.drawable.icon_whats_nearby); } else if (channelTitle.equals("test3")) { imageView.setImageResource(R.drawable.icon_top_tips); } else if (channelTitle.equals("test4")) { imageView.setImageResource(R.drawable.icon_plan_my_trip); } else if (channelTitle.equals("test5")) { imageView.setImageResource(R.drawable.icon_special_offers); } else if (channelTitle.equals("test6")) { imageView.setImageResource(R.drawable.icon_explore_more); } else if (channelTitle.equals("test7")) { imageView.setImageResource(R.drawable.icon_city_plus); } else if (channelTitle.equals("test8")) { imageView.setImageResource(R.drawable.icon_audio_guides); } } else { gridView = (View) convertView; } return gridView; } @Override public int getCount() { return channelTitles.length; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } }
Aquí está el código para mi diseño de fragmento incluyendo el gridview
<?xml version="1.0" encoding="utf-8"?> <Relative xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id = "@+id/dub_photo" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/photo"/> <GridView android:id="@+id/channelsGrid" android:background="@drawable/light_background" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="100dp" android:numColumns="auto_fit" android:gravity="center" android:stretchMode="columnWidth" android:layout_below="@+id/dub_photo"> </GridView> </RelativeLayout>
Y finalmente el diseño de mi elemento de la cuadrícula
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/gridItem" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="10dp"> <ImageView android:id ="@+id/grid_item_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <TextView android:textColor="#000000" android:id = "@+id/grid_item_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="12dp" android:layout_centerHorizontal="true" android:layout_below="@+id/grid_item_image" android:layout_marginTop="10dp" /> </RelativeLayout> <RelativeLayout android:id="@+id/horizontal_border" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/gridItem"> <ImageView android:id = "@+id/hor_border" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/grid_line_horizontal"/> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_alignStart="@id/horizontal_border" android:layout_height="wrap_content" android:layout_above="@+id/horizontal_border"> <ImageView android:id = "@+id/ver_border" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/grid_line_vertical"/> <ImageView android:id = "@+id/ver_border_dark" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/grid_line_ondark_vert" android:visibility="gone"/> </RelativeLayout> </RelativeLayout>
Si alguien me podría ayudar con esto, lo agradecería enormemente. He investigado los foros y he encontrado sugerencias de gridlayout, hay apoyo de api 14 y hasta, pero estoy desarrollando para api 9 y hasta.
¡Gracias!
- Agregar un encabezado a un GridView (Android)
- ¿Es posible crear un GridVIew de LinearLayouts?
- Actualización del primer elemento gridview después de que getView lo infla dos veces
- GridView con zoom
- Android Guardar objeto como blob en sqlite
- efecto de clic de cuadrícula
- Android: muestra la implementación de la vista de cabecera de google
- Cómo tener un GridView que adapte su altura cuando se agregan elementos
Usted podría utilizar un RecyclerView con un GridLayoutManager para hacer el trabajo:
final int columns = 12; GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), columns); gridLayoutManager.setOrientation(LinearLayoutManager.VERTICAL); gridLayoutManager.setSpanSizeLookup( new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { IItem adapterItem = mAdapter.getItem(position); if (adapterItem instanceof DefaultItem) { return columns/3; } if (adapterItem instanceof BiggerItem) { return columns / 2; } if (adapterItem instanceof FullWidthItem) { return columns; } return 1; } }); mRecyclerView.setLayoutManager(gridLayoutManager);
PS: He utilizado el FastAdapter lib para crear los elementos para el RecyclerView, que puedo recomendar encarecidamente: https://github.com/mikepenz/FastAdapter
- Gradle no puede resolver todas las dependencias, url personalizado maven en la biblioteca
- Cancelar o reembolsar la compra consumida en la aplicación en Android