[移动开发]Android实战简单新闻主界面设计

前言

这是自己学习过程单独做出来的，挺适合新手学习，熟悉最基本的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的朋友带来帮助。