Android实战简单新闻主界面设计
Posted 阿晨在吗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.Android应用经典主界面框架之二:仿网易新闻clientCSDN client (Fragment ViewPager)
android项目实战-背呗单词DEV05-主界面自定义menu
Android ActionBar应用实战，高仿微信主界面的设计