Android：利用基本模块实现一个包含图片，文字，链接按钮的展示页面

实现效果

如图所示，整个页面包含四个部分，标题，可横向滑动的图片，可竖向滑动的文本和可以指向包含目标网址的按钮，分别使用的组件为

• 标题：TextView
• 图片：XBanner
• 文本: ScrollView
• 按钮：Button

下面分别介绍各组件的实现：

标题

TextView是一个文本控件，可以通过其属性控制显示的文字，文字的格式，是基本的控件。
在Activity的layout文件中输入下列代码，即可添加TextView控件

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="20dp"
        android:textStyle="bold"
        android:background="@color/white"
        android:text="清华大学"/>

图片

这里使用的是XBanner控件实现图片的轮播效果。由于XBanner是开源平台GitHub中发布的一个控件，所以直接官方的SDK并没有含有这个控件，详情访问XBanner组件查看。原控件有非常多的效果，这里只使用最简单的方法实现图片轮播

增加依赖

将下列语句增加加入到Gradle文件中

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

将下列语句增加到另一个个Gradle文件中

dependencies {   
    implementation 'com.github.xiaohaibin:XBanner:androidx_v1.1.6'
    }

之后立刻Sync now一下，添加依赖

布局文件中增加XBanner

在layout文件中增加以下代码

<com.stx.xhb.androidx.XBanner
        android:id="@+id/tsingbanner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:AutoPlayTime="3000"
        app:isAutoPlay="false"
        android:scaleType="centerCrop"
        app:isShowIndicatorOnlyOne="true"
        app:isShowTips="true"
        app:isHandLoop="true"
        app:pageChangeDuration="800"
        app:pointsContainerBackground="#442e2e2e"
        app:pointsPosition="RIGHT"
        app:pointsVisibility="true"
        app:tipTextSize="10sp"/>

在Activity中进行配置

在活动中进行添加以下代码，实现对XBanner的操作

xBanner= findViewById(R.id.tsingbanner);
        List<LocalImageInfo> data =new ArrayList<>();//新建一个内容适配器
        data.add(new LocalImageInfo(R.drawable.tsinghua_scr));//添加本地图片
        data.add(new LocalImageInfo(R.drawable.tsinghua_src2));
        data.add(new LocalImageInfo(R.drawable.tsinghua_src3));
        data.add(new LocalImageInfo(R.drawable.tsinghua_src4));
        xBanner.setBannerData(data);//初始化数据
        xBanner.loadImage(new XBanner.XBannerAdapter() {
    
    
            @Override//重写适配器
            public void loadBanner(XBanner banner, Object model, View view, int position) {
    
    
                ((ImageView) view).setImageResource(((LocalImageInfo) model).getXBannerUrl());//对图片进行加载
            }
        });

文字

文字由于需要实现滚动效果，所以需要使用ScrollView控件

布局文件中增加ScrollView控件

在layout文件，新增以下代码实现，添加ScrollView控件的目的

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fadingEdge="vertical"
        android:layout_weight="25"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="需要展示的文本内容"/>

    </ScrollView>

按钮

由于自带的按钮太丑，所以应用GitHub上的Button控件，详情访问`Button。

增加依赖

在gradle文件中添加以下代码，添加依赖

dependencies {   
    compile 'com.github.dmytrodanylyk.android-process-button:library:1.0.4'
    }

布局文件中添加Button

在layout文件中增加Button控件

<com.dd.processbutton.iml.ActionProcessButton
        android:id="@+id/TsinghuaButton"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:text="了解更多"
        android:textColor="@android:color/white" >

    </com.dd.processbutton.iml.ActionProcessButton>

设置点击响应事件

在活动中设置点击响应事件，使其点击Button后跳转到学校的主页

Button button = (Button) findViewById(R.id.TsinghuaButton);
        button.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Intent intent =new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse("https://www.tsinghua.edu.cn/"));
                startActivity(intent);
            }
        });

附录

最后附上相关的代码:

activity_tsinghua.xml

该文件控制展示页面的布局：

<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="20dp"
        android:textStyle="bold"
        android:background="@color/white"
        android:text="清华大学"/>

    <com.stx.xhb.androidx.XBanner
        android:id="@+id/tsingbanner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:AutoPlayTime="3000"
        app:isAutoPlay="false"
        android:scaleType="centerCrop"
        app:isShowIndicatorOnlyOne="true"
        app:isShowTips="true"
        app:isHandLoop="true"
        app:pageChangeDuration="800"
        app:pointsContainerBackground="#442e2e2e"
        app:pointsPosition="RIGHT"
        app:pointsVisibility="true"
        app:tipTextSize="10sp"/>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fadingEdge="vertical"
        android:layout_weight="25"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="清华大学（英语：Tsinghua University，缩写： THU），简称清华，旧称清华学堂、游美肄业馆、清华学校、国立清华大学，是一所位于北京市海淀区清华园的公立大学。始建于1911年，因北京西北郊清华园而得名[19]。初为清政府利用美国退还的部分庚子赔款所建留美预备学校“游美学务处”及附设“肄业馆”，于1925年始设大学部[20]。抗日战争爆发后，清华与北大、南开南迁长沙，组建国立长沙临时大学。1938年再迁昆明，易名国立西南联合大学。1946年迁回清华园复校，拥有文、法、理、工、农等5个学院。1949年中华人民共和国成立后，国立清华大学归属中央人民政府教育部，更名“清华大学”；而原国立清华大学校长梅贻琦于1955年在台湾新竹复校，仍沿用原名。
1952年，中国高校进行院系调整，清华大学文、法、理、农、航天等院系外迁，吸纳外校工科，转为多科性工业大学，在土木、水利、计算机、核能等领域贡献卓越，被誉为“工程师的摇篮”。1978年后，逐步恢复理科、人文社科、经济管理类学科。1999年，原中央工艺美术学院并入，成立美术学院。2006年，与北京协和医学院合作办学，培养临床医学专业学生。2012年，原中国人民银行研究生部并入，成立五道口金融学院。2013年，黑石集团捐助成立清华大学苏世民书院及奖学金，与著名的牛津大学罗德奖学金及剑桥大学盖兹奖学金在捐助规模及名声上皆相当[21][22]。
截至2017年12月，清华大学拥有美术馆、博物馆、图书馆、20个学院，及近200个科研机构、5家校办产业以及一个科技园区，分别为清华控股及其旗下的紫光集团、同方集团、诚志集团、清华科技园等。学校拥有固定资产超过206亿元人民币，控股资产超过4300亿元人民币[23][24][10]，是985工程、211工程、双一流高等院校[25]。2018年《QS世界大学排名》、《泰晤士高等教育世界大学排名》、《世界大学学术排名》、《USNEWS世界大学排名》均将清华大学排在中国首位[26][27][28][29]，2019年《泰晤士高等教育世界大学排名》首次夺得亚洲第一[30]。"/>

    </ScrollView>
    <com.dd.processbutton.iml.ActionProcessButton
        android:id="@+id/TsinghuaButton"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:text="了解更多"
        android:textColor="@android:color/white" >

    </com.dd.processbutton.iml.ActionProcessButton>
    <!--android:pb_colorNormal="@android:color/holo_blue_light"
    android:pb_colorPressed="@android:color/holo_blue_dark"-->
</LinearLayout>

Tsinghua.java

该文件控制展示页面的运行逻辑

package com.example.universitylist;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;


import com.stx.xhb.androidx.XBanner;
import com.stx.xhb.androidx.entity.LocalImageInfo;

import java.util.ArrayList;
import java.util.List;

public class Tsinghua<img_list> extends AppCompatActivity {
    
    
    private XBanner xBanner;

    @Override
    protected void onCreate (Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tsinghua);
        xBanner= findViewById(R.id.tsingbanner);
        List<LocalImageInfo> data =new ArrayList<>();
        data.add(new LocalImageInfo(R.drawable.tsinghua_scr));
        data.add(new LocalImageInfo(R.drawable.tsinghua_src2));
        data.add(new LocalImageInfo(R.drawable.tsinghua_src3));
        data.add(new LocalImageInfo(R.drawable.tsinghua_src4));
        xBanner.setBannerData(data);
        xBanner.loadImage(new XBanner.XBannerAdapter() {
    
    
            @Override
            public void loadBanner(XBanner banner, Object model, View view, int position) {
    
    
                ((ImageView) view).setImageResource(((LocalImageInfo) model).getXBannerUrl());
            }
        });

        Button button = (Button) findViewById(R.id.TsinghuaButton);
        button.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Intent intent =new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse("https://www.tsinghua.edu.cn/"));
                startActivity(intent);
            }
        });

    }
}