带有封面图像的Android GridView按钮标题

问题描述：

我正在尝试创建类似附加图片的应用程序。因此，我从网站上阅读了很多文章，比如像gridLayout，gridView，Tablelayout等的recyclerview。我在开发android应用程序方面很新颖。带有封面图像的Android GridView按钮标题

所以我正在寻找一个指导原则，我该如何继续这个设计，特别是这个设计的库或框架。在我的应用程序中，我只想在标题上有封面照片。例如公司的3或4张图片，这些图片将通过swip视图自动更改。在这个图像下面，我想在gridview中实现六个按钮，它基本上是这个应用程序的六个选项。我不想在这个应用程序的任何滚动视图。

现在什么是一步一步的工作来做这个应用程序与复杂化。我在这里附加了图片。第一个是我的应用程序的样机，第二个是我想要实现的示例应用程序。

Mockup of my App option page

[ Sample App as per expectation

我的XML代码是这个页面是 -

<?xml version="1.0" encoding="utf-8"?> 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="demo.app.com.bluapp_client_and.ui.MainOptionPage" 
    tools:showIn="@layout/activity_main" 
    android:orientation="vertical" 
    android:weightSum="2"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_weight="1" 
    android:background="#192832"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewPager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentTop="true"> 

    </android.support.v4.view.ViewPager> 
    </LinearLayout> 

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_weight="1" 
    android:background="#125745"> 

    <GridView 
     android:id="@+id/gridView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:verticalSpacing="2dp" 
     android:horizontalSpacing="2dp" 
     android:stretchMode="columnWidth" 
     android:numColumns="2"/> 

    </FrameLayout> 

    </LinearLayout>

和单个网格XML代码

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:padding="15dp" 
android:gravity="center" 
android:background="@drawable/option_background" 
> 
<ImageView 
    android:id="@+id/grid_image" 
    android:layout_width="50dp" 
    android:layout_height="50dp" 
    android:layout_gravity="center" 
    /> 
<TextView 
    android:id="@+id/grid_text" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:textColor="#f5edff" /> 
    </LinearLayout>

enter image description here

答

对于动画滑块在顶部尝试这种方式

dependencies { 
     compile "com.android.support:support-v4:+" 
     compile 'com.squareup.picasso:picasso:2.3.2' 
     compile 'com.nineoldandroids:library:2.4.0' 
     compile 'com.daimajia.slider:library:[email protected]' 
}

XML

<com.daimajia.slider.library.SliderLayout 
     android:id="@+id/slider" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
/>

https://github.com/daimajia/AndroidImageSlider

现在，网格布局我建议使用

https://www.learn2crack.com/2016/03/grid-recyclerview-with-images-and-text.html

编辑

按你想有六个定格您的要求，我建议用weightsum和重量使用线性布局。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    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" 
    android:orientation="vertical" 
    tools:context=".datasource.MainActivity" > 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:src="@drawable/home" 
     /> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:weightSum="3" 
     > 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      android:layout_weight="1" 
      android:weightSum="2" 
      > 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 
       /> 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 

       /> 
     </LinearLayout> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      android:layout_weight="1" 
      android:weightSum="2" 
      > 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 
       /> 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 

       /> 
     </LinearLayout> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      android:layout_weight="1" 
      android:weightSum="2" 
      > 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 
       /> 
      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home" 
       android:layout_weight="1" 

       /> 
     </LinearLayout> 

    </LinearLayout> 




</LinearLayout>

编辑

您还可以使用GridView控件

<GridView 
     android:id="@+id/gridview" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:verticalSpacing="0dp" 
     android:horizontalSpacing="0dp" 
     android:stretchMode="columnWidth" 
     android:numColumns="2"/>

输出

非常感谢你的回答。我会试试这个，让你知道。 – ktina51

@ Aditya Vyas-Lakhan实际上我不想在我的网格中查看回收站视图。我只想要六个固定的网格，它将在屏幕的一半上进行调整。我通过给我的代码修改了我的答案。但不幸的是，这不符合我的要求。我想补充网格完全相同，因为pictuew @nowshinreza检查我编辑的答案它正在为我工作 – ktina51

@Adyta但它不可能与gridview – ktina51

答

在你看来，

使用线性布局并与权重和把它分成三部分，与布局3重量
使用视图寻呼机1
与布局2重量
4使用RecyclerView网格视图为指示器使用任何视图寻呼机指示器

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/white" 
    android:orientation="vertical" 
    android:weightSum="3"> 

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

     <android.support.v4.view.ViewPager 
      android:id="@+id/view_pager_onboarding" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

     </android.support.v4.view.ViewPager> 

     <com.erbauen.App_intro.CirclePageIndicator 
      android:id="@+id/indicator" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_marginBottom="20dp" /> 
    </RelativeLayout> 


    <android.support.v7.widget.RecyclerView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1"></android.support.v7.widget.RecyclerView> 


</LinearLayout>

希望它可以帮助你

谢谢你的答案。我会尝试这一个，并尽快让你知道 – ktina51

我已经修改了我的问题一点点。特点是我不想在我的网格中获得recyclerview。我只想要6个固定的网格，它可以作为一个选项按钮。类似于示例图片。但是用我的代码，我无法适应framelayout中的网格。它显示了底部 – ktina51

你可以保持顶部视图分页的一些emply空间，而不是回收利用视图你走线性布局....但回收使您的生活更容易处理点击事件和加载多视图的有效方式....关于高度，请使子布局高度包裹内容 –

带有封面图像的Android GridView按钮标题

相关推荐