文章導航

一、【Android專案實戰 | 從零開始寫app(一)】創建專案

二、【Android專案實戰 | 從零開始寫app(二)】實作閃屏頁，啟動app

三、【Android專案實戰 | 從零開始寫app(三)】實作引導頁，進入登錄or主頁面

四、【Android專案實戰 | 從零開始寫app(四)】Okhttp+Gson實作服務端登錄驗證功能

五、【Android專案實戰 | 從零開始寫app(五)】okhttp+gson實作服務端注冊功能

六、【Android專案實戰 | 從零開始寫app(六)】用TabLayout+ViewPager搭建App 框架主頁面底部導航欄

七、【Android專案實戰 | 從零開始寫app(七)】優化主頁導航欄，禁用主頁頁面滑動切換效果

八、【Android專案實戰 | 從零開始寫app(八)】實作app首頁廣告輪播圖切換和搜索跳轉

九、【Android專案實戰 | 從零開始寫app(九)】實作app首頁熱門推薦

十、【Android專案實戰 | 從零開始寫app(十)】實作app首頁九宮格服務分類點擊跳轉

十一、【Android專案實戰 | 從零開始寫app(11)】實作新聞模塊資料的決議

十二、【Android專案實戰 | 從零開始寫app(12)】實作服務頁面資料的決議

十三、【Android專案實戰 | 從零開始寫app(13)】實作用戶中心模塊登錄退出登錄&資訊修改&個人訂單串列查看…

十四、【Android專案實戰 | 從零開始寫app(14)】實作發布模塊…

本篇實作效果：

由于首頁內容有點多，因此采用分步講解，暫時先實作下面這兩個功能吧~可以吧？哈哈~

實作首頁搜索框搜索，軟鍵盤出現搜索按鈕，點擊搜索跳轉到對應的搜索結果串列頁面
Banner2.1.0實作App 首頁廣告圖片鏈接輪播，網路請求服務端輪播圖圖片和鏈接，實作點擊對應的輪播圖片跳轉到對應的鏈接詳情

本篇專案目錄：

自己創建對應的檔案
在這里插入圖片描述

實作前提

設定，java編譯版本，防止編譯出錯，右鍵app–Open Module Settings ，設定如下
在這里插入圖片描述
加載banner依賴，再sycn一下：

implementation 'com.youth.banner:banner:2.1.0'

功能實作邏輯

我的大部分資料都是從服務端決議的，根據服務端回傳的輪播圖資料創建對應的物體類

在這里插入圖片描述

BannerBean.class:

package com.example.myapp.bean;

import java.util.List;

/**
 * @ProjectName: MyApp
 * @Package: com.example.myapp.bean
 * @ClassName: BannerBean
 * @Description:
 * @Author: liyingxia
 * @CreateDate: 2021/4/18 8:58
 */
public class BannerBean {
    /**
     * total : 4
     * rows : [{"id":10,"imgUrl":"/profile/home2.png","type":"45","createTime":"2020-10-12T22:55:17.000+0800","sort":"2","display":"N"},{"id":11,"imgUrl":"/profile/home3.png","type":"45","createTime":"2020-10-12T22:55:17.000+0800","sort":"3","display":"N"},{"id":12,"imgUrl":"/profile/home4.png","type":"45","createTime":"2020-10-12T22:55:17.000+0800","sort":"4","display":"N"},{"id":13,"imgUrl":"/profile/home1.png","type":"45","createTime":"2020-10-12T22:55:17.000+0800","sort":"1","display":"N"}]
     * code : 200
     * msg : 查詢成功
     */

    private int total;
    private int code;
    private String msg;
    private List<RowsDTO> rows;

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public List<RowsDTO> getRows() {
        return rows;
    }

    public void setRows(List<RowsDTO> rows) {
        this.rows = rows;
    }


    public static class RowsDTO {
        /**
         * id : 10
         * imgUrl : /profile/home2.png
         * type : 45
         * createTime : 2020-10-12T22:55:17.000+0800
         * sort : 2
         * display : N
         */


        private int id;

        private String imgUrl;

        private String type;

        private String createTime;

        private String sort;

        private String display;

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public String getImgUrl() {
            return imgUrl;
        }

        public void setImgUrl(String imgUrl) {
            this.imgUrl = imgUrl;
        }

        public String getType() {
            return type;
        }

        public void setType(String type) {
            this.type = type;
        }

        public String getCreateTime() {
            return createTime;
        }

        public void setCreateTime(String createTime) {
            this.createTime = createTime;
        }

        public String getSort() {
            return sort;
        }

        public void setSort(String sort) {
            this.sort = sort;
        }

        public String getDisplay() {
            return display;
        }

        public void setDisplay(String display) {
            this.display = display;
        }

        public RowsDTO(String imgUrl, String type) {
            this.imgUrl = imgUrl;
            this.type = type;
        }

        @Override
        public String toString() {
            return "RowsDTO{" +
                    "id=" + id +
                    ", imgUrl='" + imgUrl + '\'' +
                    ", type='" + type + '\'' +
                    ", createTime='" + createTime + '\'' +
                    ", sort='" + sort + '\'' +
                    ", display='" + display + '\'' +
                    '}';
        }
    }
}

FragmentHome

修改FragmentHome中的代碼為如下：

package com.example.myapp.fragment;

import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import com.example.myapp.R;
import com.example.myapp.activity.BannerWebView;
import com.example.myapp.activity.NewSearchActivity;
import com.example.myapp.bean.BannerBean;
import com.youth.banner.Banner;
import com.youth.banner.adapter.BannerImageAdapter;
import com.youth.banner.holder.BannerImageHolder;
import com.youth.banner.indicator.CircleIndicator;
import com.youth.banner.listener.OnBannerListener;

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

/**
 * @ProjectName: MyApp
 * @Package: com.example.myapp.fragment
 * @ClassName: HomeFragment
 * @Description:
 * @Author: liyingxia
 * @CreateDate: 2021/4/13 21:34
 */
public class HomeFragment extends BaseFragment {
    private static final String TAG = HomeFragment.class.getSimpleName();
    private Banner banner;
    private EditText edt_search;
    private List<BannerBean.RowsDTO> list;


    @Override
    public View initView() {
        Log.i(TAG, "首頁的視圖被實體化了");
        View view = View.inflate(getActivity(), R.layout.fragment_home, null);
        banner = (Banner) view.findViewById(R.id.banner);
        edt_search = (EditText) view.findViewById(R.id.edt_search);

        return view;
    }


    @Override
    public void initData() {
        super.initData();

        initEditService();  //初始化搜索框
        initBanner();      // 初始化輪播圖

    }

    private void initBanner() {
        //網路加載圖片
        list = new ArrayList<>();
        list.add(new BannerBean.RowsDTO("http://192.93.196.45:8080/profile/home1.png","智慧城市" ));
        list.add(new BannerBean.RowsDTO("http://192.93.196.45:8080/profile/home2.png", "智慧養老"));
        list.add(new BannerBean.RowsDTO("http://192.93.196.45:8080/profile/home3.png", "智慧社區"));
        list.add(new BannerBean.RowsDTO("http://192.93.196.45:8080/profile/home4.png", "智慧生活"));
        banner.setAdapter(new BannerImageAdapter<BannerBean.RowsDTO>(list) {
            @Override
            public void onBindView(BannerImageHolder holder, BannerBean.RowsDTO data, int position, int size) {
                //BannerImageHolder 利用banner實作圖片加載,也可自己實作圖片加載
                Glide.with(getActivity())
                        .load(data.getImgUrl())
                        .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))
                        .into(holder.imageView);
            }
        }).addBannerLifecycleObserver(this)   //添加生命周期觀察者
                .setIndicator(new CircleIndicator(getActivity()))
                .setOnBannerListener(new OnBannerListener() {
                    @Override
                    public void OnBannerClick(Object o, int position) {
                        Intent intent = new Intent(getActivity(), BannerWebView.class);
                        Bundle bundle = new Bundle();
                        bundle.putString("url",list.get(position).getImgUrl());
                        intent.putExtras(bundle);
                        getActivity().startActivity(intent);
                    }
                });
    }

    private void initEditService() {
        edt_search.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                    String search = edt_search.getText().toString();
                    Intent intent = new Intent(getActivity(), NewSearchActivity.class);
                    intent.putExtra("search",search);
                    startActivity(intent);
                    return true;
                }
                return false;
            }
        });
    }


}

fragment_home

修改fragment_home頁面布局

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#1A5BDD"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="39dp"
            android:layout_marginLeft="24dp"
            android:layout_marginTop="20dp"
            android:layout_marginRight="24dp"
            android:background="@drawable/shape_search_box"
            android:gravity="center_vertical"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_marginLeft="13dp"
                android:src="@drawable/home_search_icon" />
            <EditText
                android:id="@+id/edt_search"
                android:imeOptions="actionSearch"
                android:maxLines="1"
                android:inputType="text"
                android:singleLine="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="11dp"
                android:background="@null"
                android:hint="搜索你想看的新聞"
                android:textColor="#000"
                android:textColorHint="#737373"
                android:textSize="15sp" />
        </LinearLayout>
    </LinearLayout>
    <!--  android:drawableRight="@drawable/location"-->
    <com.youth.banner.Banner
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:id="@+id/banner">
    </com.youth.banner.Banner>

</LinearLayout>

BannerWebView

banner 廣告輪播鏈接跳轉頁面

package com.example.myapp.activity;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.example.myapp.R;

public class BannerWebView extends AppCompatActivity {

    private Toolbar toolbar;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_banner_webview);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        webView = (WebView) findViewById(R.id.webView);
        initData();
    }

    private void initData() {
        toolbar.setNavigationIcon(R.mipmap.top_bar_left_back);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });

        Bundle mbundle = getIntent().getExtras();
        webView.loadUrl(mbundle.getString("url"));
        webView.requestFocusFromTouch();
        webView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        // 打開頁面時， 自適應螢屏
        WebSettings webSettings = webView.getSettings();
        webSettings.setUseWideViewPort(true);//設定此屬性，可任意比例縮放
        webSettings.setLoadWithOverviewMode(true);
        // 便頁面支持縮放
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
    }


}

activity_banner_webview

<?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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".activity.BannerWebView">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/toolbar"
            android:background="#0E8CF1"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="banner廣告詳情"
            android:gravity="center"
            android:textColor="#fff"
            android:textSize="20sp"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/webView"/>

</LinearLayout>

NewSearchActivity

搜索跳轉頁面

package com.example.myapp.activity;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

import com.example.myapp.R;

public class NewSearchActivity extends AppCompatActivity {
    private TextView tv;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_new_search);

        tv = (TextView) findViewById(R.id.tv);

    }

}

activity_new_search

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".activity.NewSearchActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="新聞搜索結果顯示串列"
        android:gravity="center"
        android:textSize="20sp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

防止底部導航欄被鍵盤頂上來，需要在清單檔案中，底部導航欄所在的activity中添加如下：

android:windowSoftInputMode="stateAlwaysVisible|adjustPan"