关于

本篇主要是主界面的绘制、包括底部菜单栏、首页轮播图（把所有东西都放本篇来讲会显得篇幅太长，而且思路不一定会清晰，本着解耦的想法，我会尽量把一些内容分开，以简易音乐文章系列之一形式出现，就比如、比如）

本篇首页的底部菜单栏用的是RadioButton，轮播图用的是第三方banner+viewpager2，关于banner的详细使用可以参考这篇

效果图

在这里插入图片描述

底部导航栏菜单资源

：提取码：tf7x

可以看到几乎大部分都是.webp格式图片，如何转换可以参考，好处就是图片大小锐减。

第一步，修改activity_main.xml布局文件

添加radiobutton的图片样式bottom_home_style.xml，其他两个复制修改即可。：

在res/values/styles.xml下添加对应text1的tab_RadioButton_normal主题：

其中text颜色选取样式bottom_text_style.xml：

新增Fragment_main.java碎片

修改res/values/strings.xml文件：


   
    简易音乐
       
       
   
    Hello blank fragment
       
   
    <
       
   
    发现
       
   
    我的
       
   
    云村
       
   
    每日推荐
       
   
    歌单
       
   
    排行榜
       
   
    电台
       
   
    直播
       
   
    私人FM
       
   
    懂你的精选歌单
       
   
    查看更多
       
   
    手机号登录
       
   
    再按一次退出应用
       
   
    请输入手机号
       
   
    请输入密码
       
   
    立即登录
       
   
    登 录
       
   
    请输入手机号码
       
   
    请输入有效的电话号码
       
   
    请输入密码
       
   
    请输入小于30位的密码
       
   
    请正确输入密码
       
   
    搜索
       
   
    历史
       
   
    热搜榜

修改fragment_main.xml布局文件：

其中查看更多的text的样式bg_playlist_playground.xml如下：

添加实体类与轮播图适配器

实体类通过GsonFormat插件生成的：

package com.tobey.jianyimusic.home.bean;import org.litepal.annotation.Column;import org.litepal.crud.LitePalSupport;import java.io.Serializable;import java.util.List;/** * 首页轮播图bean * Created By Tobey on 2021/6/10 */public class banner_bean {
       private int code;    private List
   
     banners;    public int getCode() {
           return code;    }    public void setCode(int code) {
           this.code = code;    }    public List
    
      getBanners() {
           return banners;    }    public void setBanners(List
     
       banners) {
           this.banners = banners;    }    public static class BannersBean {
           /**         * pic : http://p1.music.126.net/wtPhw_8mf71WE8Skz7laYA==/109951165299445032.jpg         * targetId : 0         * adid : null         * targetType : 3000         * titleColor : blue         * typeTitle : 独家策划         * url : https://music.163.com/m/at/5f4eff178c81c03a8f906e90         * adurlV2 : null         * exclusive : false         * monitorImpress : null         * monitorClick : null         * monitorType : null         * monitorImpressList : []         * monitorClickList : []         * monitorBlackList : null         * extMonitor : null         * extMonitorInfo : null         * adSource : null         * adLocation : null         * encodeId : 0         * program : null         * event : null         * video : null         * dynamicVideoData : null         * song : null         * bannerId : 1599390761322724         * alg : null         * scm : 1.music-homepage.homepage_banner_force.banner.1010304.968363584.null         * requestId :         * showAdTag : true         * pid : null         * showContext : null         * adDispatchJson : null         */        private String pic;        private long targetId;        private Object adid;        private int targetType;        private String titleColor;        private String typeTitle;        private String url;        private Object adurlV2;        private boolean exclusive;        private Object monitorImpress;        private Object monitorClick;        private Object monitorType;        private Object monitorBlackList;        private Object extMonitor;        private Object extMonitorInfo;        private Object adSource;        private Object adLocation;        private String encodeId;        private Object program;        private Object event;        private Object video;        private Object dynamicVideoData;        private Object song;        private String bannerId;        private Object alg;        private String scm;        private String requestId;        private boolean showAdTag;        private Object pid;        private Object showContext;        private Object adDispatchJson;        private List
       monitorImpressList;        private List
       monitorClickList;        public String getPic() {
               return pic;        }        public void setPic(String pic) {
               this.pic = pic;        }        public long getTargetId() {
               return targetId;        }        public void setTargetId(long targetId) {
               this.targetId = targetId;        }        public Object getAdid() {
               return adid;        }        public void setAdid(Object adid) {
               this.adid = adid;        }        public int getTargetType() {
               return targetType;        }        public void setTargetType(int targetType) {
               this.targetType = targetType;        }        public String getTitleColor() {
               return titleColor;        }        public void setTitleColor(String titleColor) {
               this.titleColor = titleColor;        }        public String getTypeTitle() {
               return typeTitle;        }        public void setTypeTitle(String typeTitle) {
               this.typeTitle = typeTitle;        }        public String getUrl() {
               return url;        }        public void setUrl(String url) {
               this.url = url;        }        public Object getAdurlV2() {
               return adurlV2;        }        public void setAdurlV2(Object adurlV2) {
               this.adurlV2 = adurlV2;        }        public boolean isExclusive() {
               return exclusive;        }        public void setExclusive(boolean exclusive) {
               this.exclusive = exclusive;        }        public Object getMonitorImpress() {
               return monitorImpress;        }        public void setMonitorImpress(Object monitorImpress) {
               this.monitorImpress = monitorImpress;        }        public Object getMonitorClick() {
               return monitorClick;        }        public void setMonitorClick(Object monitorClick) {
               this.monitorClick = monitorClick;        }        public Object getMonitorType() {
               return monitorType;        }        public void setMonitorType(Object monitorType) {
               this.monitorType = monitorType;        }        public Object getMonitorBlackList() {
               return monitorBlackList;        }        public void setMonitorBlackList(Object monitorBlackList) {
               this.monitorBlackList = monitorBlackList;        }        public Object getExtMonitor() {
               return extMonitor;        }        public void setExtMonitor(Object extMonitor) {
               this.extMonitor = extMonitor;        }        public Object getExtMonitorInfo() {
               return extMonitorInfo;        }        public void setExtMonitorInfo(Object extMonitorInfo) {
               this.extMonitorInfo = extMonitorInfo;        }        public Object getAdSource() {
               return adSource;        }        public void setAdSource(Object adSource) {
               this.adSource = adSource;        }        public Object getAdLocation() {
               return adLocation;        }        public void setAdLocation(Object adLocation) {
               this.adLocation = adLocation;        }        public String getEncodeId() {
               return encodeId;        }        public void setEncodeId(String encodeId) {
               this.encodeId = encodeId;        }        public Object getProgram() {
               return program;        }        public void setProgram(Object program) {
               this.program = program;        }        public Object getEvent() {
               return event;        }        public void setEvent(Object event) {
               this.event = event;        }        public Object getVideo() {
               return video;        }        public void setVideo(Object video) {
               this.video = video;        }        public Object getDynamicVideoData() {
               return dynamicVideoData;        }        public void setDynamicVideoData(Object dynamicVideoData) {
               this.dynamicVideoData = dynamicVideoData;        }        public Object getSong() {
               return song;        }        public void setSong(Object song) {
               this.song = song;        }        public String getBannerId() {
               return bannerId;        }        public void setBannerId(String bannerId) {
               this.bannerId = bannerId;        }        public Object getAlg() {
               return alg;        }        public void setAlg(Object alg) {
               this.alg = alg;        }        public String getScm() {
               return scm;        }        public void setScm(String scm) {
               this.scm = scm;        }        public String getRequestId() {
               return requestId;        }        public void setRequestId(String requestId) {
               this.requestId = requestId;        }        public boolean isShowAdTag() {
               return showAdTag;        }        public void setShowAdTag(boolean showAdTag) {
               this.showAdTag = showAdTag;        }        public Object getPid() {
               return pid;        }        public void setPid(Object pid) {
               this.pid = pid;        }        public Object getShowContext() {
               return showContext;        }        public void setShowContext(Object showContext) {
               this.showContext = showContext;        }        public Object getAdDispatchJson() {
               return adDispatchJson;        }        public void setAdDispatchJson(Object adDispatchJson) {
               this.adDispatchJson = adDispatchJson;        }        public List
       getMonitorImpressList() {
               return monitorImpressList;        }        public void setMonitorImpressList(List
       monitorImpressList) {
               this.monitorImpressList = monitorImpressList;        }        public List
       getMonitorClickList() {
               return monitorClickList;        }        public void setMonitorClickList(List
       monitorClickList) {
               this.monitorClickList = monitorClickList;        }    }}

轮播图使用的第三方，在项目build下添加（这里不做一些使用解释，其他用法可参考）：

//banner    implementation 'io.github.youth5201314:banner:2.2.2'    implementation "androidx.viewpager2:viewpager2:1.0.0"

在工程build下添加仓库maven：

repositories {
           google()        jcenter()        maven {
    url "https://jitpack.io" }        //主要这行        maven {
    url "https://s01.oss.sonatype.org/content/groups/public" }    }

编写TitleHolder继承RecyclerView.ViewHolder：

public class TitleHolder extends RecyclerView.ViewHolder {
       public ImageView imageView;    public TextView textView;    public TitleHolder(@NonNull View itemView) {
           super(itemView);        imageView = itemView.findViewById(R.id.bannerImage);        textView = itemView.findViewById(R.id.bannerTitle);    }}

新增banner图片+标题的item布局文件banner_title_image.xml：

编写ImageTitleAdapter继承BannerAdapter（三方banner里面的）：

/** * banner轮播图适配器 图片+标题 */public class ImageTitleAdapter extends BannerAdapter
   
     {
       public Context mContext;    public ImageTitleAdapter(List
    
      datas, Fragment_main fragment_main) {
           super(datas);        mContext = fragment_main.getActivity();    }    @Override    public TitleHolder onCreateHolder(ViewGroup parent, int viewType) {
          return new TitleHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.banner_title_image,parent,false));    }    @Override    public void onBindView(TitleHolder holder, banner_bean.BannersBean data, int position, int size) {
           Glide.with(holder.imageView)                .load(data.getPic())                .thumbnail(Glide.with(holder.itemView).load(R.drawable.loading))                .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))                .into(holder.imageView);        holder.textView.setText(data.getTypeTitle());        holder.textView.setTextColor(data.getTitleColor().equals("red")?mContext.getResources().getColor(R.color.red):mContext.getResources().getColor(R.color.blue));        /* 
     
      #00BFFF
              
     
      #FF0000
     */    }}

新增轮播图功能

修改ApiService.java类，添加轮播图请求接口方法：

/**     * 轮播图*/    @GET("banner")    Observable
   
     getBanner(@Query("type") int type);

修改Fragment_main.java代码

public class Fragment_main extends BaseFragment {
       @BindView(R.id.banner)    Banner banner;    @BindView(R.id.text_fm)    TextView textView_fm;4    List
   
     list_banner ;    private static int potsition = 0            @Override    protected int getLayout() {
           return R.layout.fragment_main;    }    @Override    protected void initView(View view) {
           String date = Calendar.getInstance().get(Calendar.DAY_OF_MONTH) + "";        textView_fm.setText(date);        initData();    }    private void initData() {
           //请求轮播图        RetrofitUtils.getmApi().getBanner(1)                .compose(RXHelper.observableIO2Main(getContext()))                .subscribe(new StaticMethodUtils.OnCallback
    
     (){
                       @Override                    public void onNext(banner_bean banner_bean) {
                          if (banner_bean.getCode() == 200){
                                      updateBanner(banner_bean.getBanners());                       }                    }                    @Override                    public void onError(Throwable e) {
                           super.onError(e);                    }                });       }    private void updateBanner(List
     
       banners) {
           if (banners !=null && banners.size() >0){
               int i = banners.size();            list_banner = new ArrayList<>();            for (int j=0;j

修改MainActivity.java代码

@Route(path = Config.ROUTE_HOME)public class MainActivity extends BaseActivity {
       @BindView(R.id.frame_main)    FrameLayout frameLayout_main;    @BindView(R.id.rb_main)    RadioButton rgMain;    @BindView(R.id.rg_tabs)    RadioGroup rgTabs;    private Login_Bean loginBean;    @Override    protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    @Override    protected BasePresenter onCreatePresenter() {
           return null;    }    @Override    protected void initData() {
               }    @Override    protected void initModule() {
           rgTabs.check(R.id.rb_main);        changeFragment(new Fragment_main());        rgTabs.setOnCheckedChangeListener(mOnCheckedChangeListener);    }    private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
           @Override        public void onCheckedChanged(RadioGroup group, int checkedId) {
               switch (checkedId){
                   case R.id.rb_main:                  changeFragment(new Fragment_main());                    break;                case R.id.rb_contact:                    break;                case R.id.rb_me:                    changeFragment(new Fragment_center());                    break;            }        }    };    private void changeFragment(BaseFragment fragment) {
           //开启事务        FragmentManager fm = getSupportFragmentManager();        FragmentTransaction transaction = fm.beginTransaction();        //切换布局        transaction.replace(R.id.frame_main,fragment);        transaction.commit();    }}

发现一个bug

详情参考文章

到此本篇内容介绍完毕，有问题欢迎批评指正，觉得不错的也请点个赞奥下一篇

转载地址：http://qpdqi.baihongyu.com/

你可能感兴趣的文章

主界面绘制、加载轮播图、减少apk体积（ 简易音乐 五）

关于

效果图