您的位置:首页 > 移动开发 > Android开发

android 主页布局和仿美团gridview轮播

2016-12-10 09:05 148 查看

android 主页布局和仿美团gridview轮播

作为一个老程序员,来说这个问题特别简单,估计也有好几种主页布局方式
今天有个美女实习生问我怎么写类似与美团首页的那个gridview轮播
犹豫是美女问问题,我当然的写个啦,所谓我就在晚上花了2个小时的时间做了个,
大家不要以为我那个啦,我们作为老程序员应该多多照顾一些新人,这样我们也能够学到很多东西,才能够共同进步。
首先先看图,到底是个什么样子,其实很简单





是不是很简单,下面就给大家实现的原理
1、使用的库为:

compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.afollestad.material-dialogs:core:0.9.0.2'
compile 'com.afollestad.material-dialogs:commons:0.9.0.2'

注解库和dialog库
主页   在此我使用的是注解的方式,至于为什么,大家应该都知道,节省时间吗

package com.wz.stat.demo;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.TextView;

import com.wz.stat.demo.fragment.IndexFragment;
import com.wz.stat.demo.fragment.MyFragment;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

/************************************************
* author:       火中燕.
* email:        wangzhong0116@foxmail.com.
* version:      1.0.1.
* date:         2016/12/9 20:17.
* description:  主页
***********************************************/
public class MainActivity extends AppCompatActivity{

//自定义标题栏
@Bind(R.id.txt_topbar)
TextView txt_topbar;
//底部选项卡按钮
@Bind(R.id.txt_home)
TextView txt_home;
@Bind(R.id.txt_my)
TextView txt_my;
//中央可切换视图
@Bind(R.id.ly_content)
FrameLayout ly_content;

//中央可切换视图
private IndexFragment indexFragment;
private MyFragment myFragment;
private FragmentManager fManager;

private FragmentTransaction fTransaction;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);

fManager = getFragmentManager();
bindViews();
txt_home.performClick();
}

//UI组件初始化与事件绑定
private void bindViews() {
Drawable d_home = getResources().getDrawable(R.drawable.tab_menu_home);
d_home.setBounds(0, 0, d_home.getMinimumWidth() - 10, d_home.getMinimumHeight() - 10);
txt_home.setCompoundDrawables(null, d_home, null, null);

Drawable d_my = getResources().getDrawable(R.drawable.tab_menu_my);
d_my.setBounds(0, 0, d_my.getMinimumWidth() - 10, d_my.getMinimumHeight() - 10);
txt_my.setCompoundDrawables(null, d_my, null, null);

}

//重置所有文本的选中状态
private void setSelected() {
txt_home.setSelected(false);
txt_my.setSelected(false);
}

//隐藏所有Fragment
private void hideAllFragment(FragmentTransaction fragmentTransaction) {
if (indexFragment != null) fragmentTransaction.hide(indexFragment);
if (myFragment != null) fragmentTransaction.hide(myFragment);
}

@OnClick({R.id.txt_home, R.id.txt_my})
public void onClick(View v) {
fTransaction = fManager.beginTransaction();
hideAllFragment(fTransaction);
switch (v.getId()) {
case R.id.txt_home:
setSelected();
txt_home.setSelected(true);
if (indexFragment == null) {
indexFragment = new IndexFragment();
fTransaction.add(R.id.ly_content, indexFragment);
} else {
fTransaction.show(indexFragment);
txt_topbar.setText("首页");
}
break;
case R.id.txt_my:
setSelected();
txt_my.setSelected(true);
if (myFragment == null) {
myFragment = new MyFragment();
fTransaction.add(R.id.ly_content, myFragment);
txt_topbar.setText("个人中心");
} else {
fTransaction.show(myFragment);
txt_topbar.setText("个人中心");
}
break;
}
fTransaction.commit();
}

}


3、当然了最主要的还是gridview轮播

其实很简单,主要是判断有几页,每页显示的数量,把他们展示到viewpager上



代码我就不一一贴了,我写了一个demo注释写的挺详细,为了给新人看吗,当然得写详细点

如果大家需要的话,直接去下载就行了

CSDN下载地址:     http://download.csdn.net/detail/mingzhnglei/9707088[/code] 
github下载地址:   https://github.com/rocky0116/my_station/tree/master[/code] 
如果有什么问题大家也可以给我留言,请各位大神勿喷。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android gridview 美团