Question

我正在尝试创建类似附图的应用。因此，我从网站上阅读了很多文章，例如使用gridLayout，gridView，Tablelayout等的recyclerview。我是开发Android应用程序的新手。

所以我正在寻找一个指导原则，我该如何继续这个设计，特别是这个设计的库或框架。在我的应用程序中，我只想在标题上有封面照片。例如，公司的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

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

现在，对于GridLayout，我建议使用

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

修改

根据您的要求，您希望有六个固定网格，我建议使用权重和权重的线性布局。

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

在您的视图中，

使用线性布局并将其分为3个部分，权重总和为3
使用布局权重为1的视图寻呼机
使用RecyclerView网格视图，布局权重2
4指示器使用任何视图寻呼机指示器

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

希望它可以帮到你

标题

2 个答案: