帶有封面圖像的Android GridView按鈕標題

Question

我正在嘗試創建類似附加圖片的應用程序。因此，我從網站上閱讀了很多文章，比如像gridLayout，gridView，Tablelayout等的recyclerview。我在開發android應用程序方面很新穎。

所以我正在尋找一個指導原則，我該如何繼續這個設計，特別是這個設計的庫或框架。在我的應用程序中，我只想在標題上有封面照片。例如公司的3或4張圖片，這些圖片將通過swip視圖自動更改。在這個圖像下面，我想在gridview中實現六個按鈕，它基本上是這個應用程序的六個選項。我不想在這個應用程序的任何滾動視圖。

現在什麼是一步一步的工作來做這個應用程序與複雜化。我在這裏附加了圖片。第一個是我的應用程序的樣機，第二個是我想要實現的示例應用程序。

[

我的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

Answer 1

對於動畫滑塊在頂部嘗試這種方式

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:1.1.5@aar' 
} 

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"/> 

輸出

Answer 2

在你看來，

1. 使用線性佈局並與權重和把它分成三部分，與佈局3重量
2. 使用視圖尋呼機1
3. 與佈局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> 

---

希望它可以幫助你