前言

這是自己學習程序單獨做出來的，挺適合新手學習，熟悉最基本的banner,imageview,listview,text等等基礎控制元件，適合初學者，原專案共有五個模塊，這個是其中一個模塊

提示：以下是本篇文章正文內容，下面案例可供參考

效果圖：

在這里插入圖片描述
總體思路概述：
如上方效果圖所示，我們頂部是使用了一個banner的控制元件來實作圖片的輪播效果，這里我使用的是第三方插件，所以實作的輪播代碼相對于簡短，下方我提供的專案原始碼里面就有，下方的的服務入口使用了我們最基礎的LinearLayout的布局，在布局里面放了ImageView和TextView控制元件，這都是我們最基礎的控制元件，也很適合初學者學習，同理，下方的新聞導航欄，也是直接使用TextView控制元件實作，在下方新聞串列也是最常見的ListView控制元件，最下方的底部導航欄使用了RadioButton控制元件和Fragment來實作點擊圖示變色和切換到不同頁面的操作，有需要完整源代碼可運行的，可以看下方專案鏈接，可直接匯入運行，

1.主頁面布局檔案

fragment_host1.xml的代碼如下（示例）：

<?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=".hostFragment.HostFragment1">

    <!-- TODO: Update blank fragment layout -->
    <com.youth.banner.Banner
        android:id="@+id/banner1"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp">


        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="推薦服務"
            android:gravity="center_vertical"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >

                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ditie" />
                <TextView
                    android:id="@+id/ditie"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:layout_weight="1"
                    android:text="城市地鐵" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <ImageView
                    android:id="@+id/image2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/bus"/>
                <TextView
                    android:id="@+id/bus"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:layout_weight="1"
                    android:text="智慧巴士" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <ImageView
                    android:id="@+id/image3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/menzheng"/>
                <TextView
                    android:id="@+id/menzheng"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:layout_weight="1"
                    android:text="門診預約" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <ImageView
                    android:id="@+id/image4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/live"/>
                <TextView
                    android:id="@+id/live"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:layout_weight="1"
                    android:text="生活繳費" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >
                <ImageView
                    android:id="@+id/image5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/weizhang"/>
                <TextView
                    android:id="@+id/weizhang"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:layout_weight="1"
                    android:text="違章查詢" />
            </LinearLayout>

        </LinearLayout>
        <LinearLayout
            android:layout_width="160dp"
            android:layout_height="80dp"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:id="@+id/image6"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/pack"/>
                <TextView
                    android:id="@+id/pack"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:text="停車場" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:id="@+id/image7"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/gdfuwu"/>
                <TextView
                    android:id="@+id/gdfuwu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:text="更多服務"
                    />
            </LinearLayout>

        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:text="時政"
                android:id="@+id/szTextView"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
            <TextView
                android:text="基層"
                android:id="@+id/jcTextView"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
            <TextView
                android:text="廣播"
                android:id="@+id/gbTextView"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
            <TextView
                android:text="電視"
                android:id="@+id/dsTextView"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
            <TextView
                android:text="旅游"
                android:id="@+id/lyTextView"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
            <TextView
                android:text="視頻"
                android:id="@+id/spTextView"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"></TextView>
        </LinearLayout>

        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/listViewNews"/>

    </LinearLayout>
</LinearLayout>

2.底部導航欄布局檔案

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioGroup
        android:id="@+id/navgroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.0"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:background="#E8E4E4"
        android:paddingTop="5dp">
        <RadioButton
            android:id="@+id/radioBtn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/selector_tab_1"
            android:button="@null"
            android:text="首頁"/>

        <RadioButton
            android:id="@+id/radioBtn2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/selector_tab_2"
            android:button="@null"
            android:text="新聞"/>
        <RadioButton
            android:id="@+id/radioBtn3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:drawableTop="@drawable/selector_tab_3"
            android:button="@null"
            android:text="全部服務"/>
        <RadioButton
            android:id="@+id/radioBtn4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_tab_1"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="智慧環保"/>
        <RadioButton
            android:id="@+id/radioBtn5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_tab_1"
            android:gravity="center_horizontal"
            android:button="@null"
            android:text="個人中心"/>


    </RadioGroup>
</LinearLayout>



</LinearLayout>

3.主頁面java代碼

HostActivity的代碼如下（示例）：

package com.example.smartcity;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.RadioGroup;
import com.example.smartcity.hostFragment.HostFragment1;
import com.example.smartcity.hostFragment.HostFragment2;
public class HostActivity extends AppCompatActivity  {
    private RadioGroup radioGroup;
    @SuppressLint("WrongViewCast")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_host);
        radioGroup = findViewById(R.id.navgroup);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                if (i == R.id.radioBtn1) {
                    switchFragment(R.id.content, "首頁");
                }
                if (i == R.id.radioBtn2) {
                    switchFragment(R.id.content, "第2頁");
                }

            }
        });

        switchFragment(R.id.content, "首頁");
    }

    private void switchFragment(int id, String tag) {

        FragmentManager manager = getSupportFragmentManager();
        Fragment fragment = manager.findFragmentByTag(tag);
        if (fragment == null) {
            if (tag == "首頁") {
                fragment = new HostFragment1();
            }
            if (tag == "第2頁") {
                fragment = new HostFragment2();
            }
        }
        FragmentTransaction ft = manager.beginTransaction();
        ft.replace(id, fragment, tag);
        ft.commit();
    }


}

這邊實作的是主頁面底部導航切換的一個效果，通過點擊導航欄圖示跳轉到新的fragment的頁面，

3.主頁面fragment1代碼

HostFragment1的代碼如下（示例）：

package com.example.smartcity.hostFragment;
import android.content.Intent;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import com.example.smartcity.DetailActivity;
import com.example.smartcity.R;
import com.example.smartcity.adapter.ImageAdapter;
import com.example.smartcity.adapter.NewsAdapter;
import com.example.smartcity.bean.ImageBean;
import com.example.smartcity.bean.NewsBean;
import com.example.smartcity.DitieActivity;
import com.example.smartcity.utils.JsonParse;
import com.youth.banner.Banner;
import com.youth.banner.indicator.CircleIndicator;
import java.util.ArrayList;
import java.util.List;
public class HostFragment1 extends Fragment {
// 輪播
    private List<ImageBean> imageBeanList;
    private ImageAdapter imageAdapter;
    private View layoutView;
    private Banner banner;
    //新聞
    private ImageView imageView1;
    private ListView listViewNews;
    private List<NewsBean> newsList;
    private NewsAdapter newsAdapter;
    private TextView tvSZ, tvJC;

    private void initView() {
        banner = layoutView.findViewById(R.id.banner1);
        imageView1 = layoutView.findViewById(R.id.image1);
        listViewNews = layoutView.findViewById(R.id.listViewNews);
        tvSZ = layoutView.findViewById(R.id.szTextView);
        tvJC = layoutView.findViewById(R.id.jcTextView);

        //顯示輪播圖
        showBanner();

        //讀取顯示新聞串列
        showNews();

        imageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(HostFragment1.this.getActivity(), DitieActivity.class);
                startActivity(intent);
            }
        });

        tvSZ.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showListByType("時政");

            }
        });

        tvJC.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showListByType("基層");
            }
        });

        listViewNews.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Intent intent = new Intent(HostFragment1.this.getActivity(), DetailActivity.class);
                intent.putExtra("title", newsList.get(i).getTitle());
                intent.putExtra("content", newsList.get(i).getContent());
                intent.putExtra("imgUrl", newsList.get(i).getImgUrl());
                startActivity(intent);
            }
        });

    }

    private void showListByType(String typeStr) {
        List<NewsBean> list = new ArrayList<NewsBean>();
        for (NewsBean newsBean : newsList) {
            if (newsBean.getPressCategory().equals(typeStr)) {
                list.add(newsBean);
            }
        }
        newsAdapter = new NewsAdapter(layoutView.getContext(), list);
        listViewNews.setAdapter(newsAdapter);
    }

    private void showNews() {
        newsList = new ArrayList<NewsBean>();
        newsList = JsonParse.getInfos(layoutView.getContext());
        newsAdapter = new NewsAdapter(layoutView.getContext(), newsList);
        listViewNews.setAdapter(newsAdapter);
    }

    private void showBanner() {
        imageBeanList = new ArrayList<ImageBean>();
        ImageBean imageBean = new ImageBean(R.mipmap.home2);
        imageBeanList.add(imageBean);
        imageBean = new ImageBean(R.mipmap.home3);
        imageBeanList.add(imageBean);
        imageBean = new ImageBean(R.mipmap.home4);
        imageBeanList.add(imageBean);
        imageBean = new ImageBean(R.mipmap.home1);
        imageBeanList.add(imageBean);
        imageAdapter = new ImageAdapter(imageBeanList);
        banner.setAdapter(imageAdapter);
        banner.setIndicator(new CircleIndicator(HostFragment1.this.getActivity()));
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        layoutView = inflater.inflate(R.layout.fragment_host1,null);
        initView();
        return layoutView;
    }

}

這些都是一些基礎控制元件的使用，我這邊就不一一說明了，我就拿其中的listview說明吧，其他的操作也都是差不多，都是通過參考控制元件，首先這邊listview想要讀取到新聞串列的資訊，那我們這邊肯定要做讀取這些新聞資訊的一個操作，當讀取到新聞資訊我們下一步做的才是給他顯示到頁面上，我們這邊是通過showNews來進行對配接器對于json的決議，以此來獲取到json的資訊，在把獲取到的資訊傳輸到我們頁面上

專案下載

原始碼下載地址：新聞主頁面帶新聞串列帶輪播底部導航欄完整原始碼專案

總結

以上部分資訊是我在之前學習程序中通過一些我們最常用也是最基礎的控制元件來實作了新聞主頁的設計，最基礎的控制元件非常適合初學者來學習，能讓他們清楚的決議代碼并掌味訓礎控制元件：listview、textview、imageview、fragment、等等控制元件，只有掌握并熟練了基礎控制元件，那才能提高我們的編碼能麗，以上是在初學階段自己摸索寫出來的頁面，也存在著許多不足和需要優化修改的地方，也可以給我提供建議，希望自己的這份專案可以給剛開始學習android的朋友帶來幫助，

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/304572.html

標籤：其他

上一篇：Android——實作堆疊折線圖(動態添加資料)

下一篇：我為大家帶來了15張超酷的登錄界面！！！

Android實戰簡單新聞主界面設計