仿饿了么等APP底部菜单(Fragment实现)
Fragment实现的底部菜单导航，是现在很多APP都有的功能，效果就是点击菜单之后，菜单实现图标和颜色的变换
实现起来主要有两种方法，一种是Tabhost，一种是3.0之后的Fragment
Fragment，需要加入v4价包
然后icon图标的话，需求自己做，或者去/，阿里的图库下载
底部菜单的图标有两种，一种是默认图标，一种是点击菜单之后的图标
&framelayout android:id="@+id/fg_content" android:layout_height="0dp" android:layout_weight="3" android:layout_width="match_parent"&
&/framelayout&
业务实现：
package com.tsc.
import android.content.I
import android.os.B
import android.support.v4.app.F
import android.support.v4.app.FragmentA
import android.support.v4.app.FragmentT
import android.view.KeyE
import android.view.V
import android.view.W
import android.widget.RadioB
import android.widget.T
import com.tsc.fragment.AllLineF
import com.tsc.fragment.HomePageF
import com.tsc.fragment.MyF
import com.tsc.fragment.OrderF
import com.tsc.listener.IBtnCallL
*fragment是3.0以后的东西，为了在低版本中使用fragment就要用到android-support-v4.jar兼容包,
*而fragmentActivity就是这个兼容包里面的，它提供了操作fragment的一些方法，其功能跟3.0及以后的版本的Activity的功能一样。
public class MainActivity extends FragmentActivity implements IBtnCallListener{
//RadioButton
private RadioButton mHomeP
private RadioButton mO
private RadioButton mF
private RadioButton mMy;
//Fragment界面类
private HomePageFragment mHomePageF
private OrderFragment mOrderF
private AllLineFragment lineF
private MyFragment mMyF
private IBtnCallListener mBtnCallL
private Bundle sendB
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置无标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
//初始化选择的Fragment
setSelection(3);
private void initView() {
mHomePage = (RadioButton) findViewById(R.id.rb_homePage);
mOrder = (RadioButton)findViewById(R.id.rb_order);
mFound = (RadioButton) findViewById(R.id.rb_found);
mMy = (RadioButton) findViewById(R.id.rb_my);
* 点击底部菜单栏后，图标和文字变色的实现
* @param index
private void setSelection(int index){
resetImg();
//创建FragmentTransaction
ft = getSupportFragmentManager().beginTransaction();
hideFragments(ft);
switch (index){
//变换图标
mHomePage.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.guide_homepage_on, 0, 0);
//变换文字颜色
mHomePage.setTextColor(mHomePage.getResources().getColor(R.color.lightblue));
if(mHomePageFragment== null){
mHomePageFragment = new HomePageFragment();
//重新添加到FragmentTransaction
ft.add(R.id.fg_content,mHomePageFragment);
ft.show(mHomePageFragment);
orderFragmentTransfermsg();
mFound.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.guide_found_on, 0, 0);
mFound.setTextColor(mFound.getResources().getColor(R.color.lightblue));
if(lineFragment== null){
lineFragment = new AllLineFragment();
ft.add(R.id.fg_content,lineFragment);
ft.show(lineFragment);
myFragmentTransfermsg();
ft.commit();
恢复默认图片
private void resetImg() {
mHomePage.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.guide_homepage, 0, 0);
mHomePage.setTextColor(mHomePage.getResources().getColor(R.color.tab_text_bg));
mOrder.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.guide_order, 0, 0);
mOrder.setTextColor(mOrder.getResources().getColor(R.color.tab_text_bg));
mFound.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.guide_found, 0, 0);
mFound.setTextColor(mFound.getResources().getColor(R.color.tab_text_bg));
mMy.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.guide_my, 0, 0);
mMy.setTextColor(mMy.getResources().getColor(R.color.tab_text_bg));
* 隐藏Fragment
* @param ft
private void hideFragments(FragmentTransaction ft){
if(mHomePageFragment != null){
ft.hide(mHomePageFragment);
if(mOrderFragment != null){
ft.hide(mOrderFragment);
if(lineFragment != null){
ft.hide(lineFragment);
if(mMyFragment != null){
ft.hide(mMyFragment);
//选择主页Fragment
public void onHomePageClicked(View view){
setSelection(0);
//选择消息Fragment
public void onOrderClicked(View view){
setSelection(1);
//选择通讯录Fragment
public void onFoundClicked(View view){
setSelection(2);
//选择我的Fragment
public void onMyClicked(View view){
setSelection(3);
* 按回车键
private long exitTime = 0;
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK
&& event.getAction() == KeyEvent.ACTION_DOWN) {
if ((System.currentTimeMillis() - exitTime) & 2000) {
Toast.makeText(getApplicationContext(), &再按一次退出程序&,
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
moveTaskToBack(false);
return super.onKeyDown(keyCode, event);
* 重载的onAttachFragment方法
public void onAttachFragment(Fragment fragment) {
mBtnCallListener=(IBtnCallListener)
} catch (Exception e) {
super.onAttachFragment(fragment);
* 实现IBtnCallListener接口的抽象方法
public void myFragmentTransfermsg() {
mMy.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.guide_my_on, 0, 0);
mMy.setTextColor(mMy.getResources().getColor(R.color.lightblue));
if(mMyFragment == null){
mMyFragment
= new MyFragment();
//通过Bundle向Fragment类传送参数
account = getIntent().getStringExtra(&account&);
sendBundle = new Bundle();
sendBundle.putString(&account&, account);
//设置Arguments
mMyFragment.setArguments(sendBundle);
ft.add(R.id.fg_content,mMyFragment);
ft.show(mMyFragment);
public void homePageFragmentTransfermsg() {
// TODO Auto-generated method stub
public void orderFragmentTransfermsg() {
mOrder.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.guide_order_on, 0, 0);
mOrder.setTextColor(mOrder.getResources().getColor(R.color.lightblue));
if(mOrderFragment== null){
mOrderFragment = new OrderFragment();
//通过Bundle向Fragment类传送参数
account = getIntent().getStringExtra(&account&);
sendBundle = new Bundle();
sendBundle.putString(&account&, account);
//设置Arguments
mOrderFragment.setArguments(sendBundle);
ft.add(R.id.fg_content,mOrderFragment);
ft.show(mOrderFragment);
public void foundFragmentTransfermsg() {
// TODO Auto-generated method stub
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'Android开发【12-09视频贴】饿了么点餐界面拖动效果怎么实现_android开发吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：110,933贴子：
Android开发【12-09视频贴】饿了么点餐界面拖动效果怎么实现收藏
请问像饿了么点餐界面
拖动商品列表时 下方的布局也跟着上下移动
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或2017 市场寒冬，抱住大腿：ElemeShoppingView项目地址：简介：仿饿了么点击购物效果更多：&&&&&&标签：A cool shopping cart effect.
Attributes
description
sv_bg_color
set shopping button background color
set shopping text
sv_text_size
set shopping text size
sv_duration
set animator duration
Step 1. Add it in your project's build.gradle at the end of repositories:
repositories {
url '/wangyuwei/maven'
Step 2. Add the dependency:
dependencies {
compile 'me.wangyuwei:shoppoing:1.0.5'
Define your banner under your xml
&me.wangyuwei.shoppoing.ShoppingView
android:layout_width=&wrap_content&
android:layout_height=&wrap_content&
android:layout_marginTop=&10dp&
app:sv_bg_color=&#D8BFD8&
app:sv_text=&TF-BOYS&
app:sv_text_size=&18sp& /&
setOnShoppingClickListener under your java
mSv1.setOnShoppingClickListener(new ShoppingView.ShoppingClickListener() {
public void onAddClick(int num) {
Log.d(&@=&&, &add.......num=& & + num);
public void onMinusClick(int num) {
Log.d(&@=&&, &minus.......num=& & + num);
Copyright [2016] [JeasonWong of copyright owner]
Licensed under the Apache License, Version 2.0 (the &License&);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an &AS IS& BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
loading自己记录、分享给好友：互联网行业的年轻人，他们面对着怎样的职业瓶颈、困惑与未来选择？过去，这鲜有人关心。资深的职场人，也多半优先选择熟人去推荐机会。100offer 致力于改变现状，帮互联网行业最好的人才发现更好的机会。使用
或 100offer App，可以一周内获得中国、美国等数千家优质企业的工作机会。如图是效果图
是仿饿了的点餐界面
1.点击左侧的ListView，通过在在适配器中设置Item来改变颜色，再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的
2.右侧的主要是重写下onScroll的方法；来改变左侧ListView的颜色及背景
不过程序中还有个问题，望大神解答就是我右侧的ListView下拉时，上面的TextView能改变；但是上拉时，TextView的不能及时改变应为滑动时我只拿了firstVisibleItem来判断的
Demo的连接：
如下是主程序代码
package com.item.
import java.util.ArrayL
import java.util.L
import com.item.jiejie.adapter.HomeA
import com.item.jiejie.adapter.MenuA
import com.item.jiejie.entity.FoodD
import android.widget.AbsListView.OnScrollL
import android.os.B
import android.app.A
import android.text.TextU
import android.util.L
import android.view.V
import android.view.W
import android.widget.AdapterV
import android.widget.AdapterView.OnItemClickL
import android.widget.AbsListV
import android.widget.ListV
import android.widget.TextV
* 防饿了的ListView联动的Demo
* @author Administrator
public class MainActivity extends Activity {
/**左侧菜单*/
private ListView lv_
/**右侧主菜*/
private ListView lv_
private TextView tv_
private MenuAdapter menuA
private HomeAdapter homeA
private int currentI
private List&FoodData& foodD
private String data[] = {"热销榜","新品套餐","便当套餐","单点菜品","饮料类","水果罐头","米饭"};
* 里面存放右边ListView需要显示标题的条目position
private ArrayList&Integer& showT
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
setView();
setData();
private void setView() {
// TODO Auto-generated method stub
lv_menu = (ListView)findViewById(R.id.lv_menu);
tv_title = (TextView)findViewById(R.id.tv_titile);
lv_home = (ListView)findViewById(R.id.lv_home);
foodDatas = new ArrayList&FoodData&();
for(int i =0;i & data. i++){
foodDatas.add(new FoodData(i, data[0] + i, data[0]));
for(int i =0;i & data.length -1; i++){
foodDatas.add(new FoodData(i, data[1] + i, data[1]));
for(int i =0;i & data.length-2; i++){
foodDatas.add(new FoodData(i, data[2] + i, data[2]));
for(int i =0;i & data.length-3; i++){
foodDatas.add(new FoodData(i, data[3] + i, data[3]));
for(int i =0;i & data.length-4; i++){
foodDatas.add(new FoodData(i, data[4] + i, data[4]));
for(int i =0;i & data.length-3; i++){
foodDatas.add(new FoodData(i, data[5] + i, data[5]));
for(int i =0;i & 6; i++){
foodDatas.add(new FoodData(i, data[6] + i, data[6]));
showTitle = new ArrayList&Integer&();
for(int i = 0; i & foodDatas.size(); i++){
if( i ==0){
showTitle.add(i );
System.out.println(i + "dd");
}else if (!TextUtils.equals(foodDatas.get(i).getTitle(), foodDatas.get(i - 1).getTitle())) {
showTitle.add(i );
System.out.println(i + "dd");
private void setData() {
// TODO Auto-generated method stub
tv_title.setText(foodDatas.get(0).getTitle());
menuAdapter = new MenuAdapter(this);
homeAdapter = new HomeAdapter(this, foodDatas);
lv_menu.setAdapter(menuAdapter);
lv_home.setAdapter(homeAdapter);
lv_menu.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView&?& arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
menuAdapter.setSelectItem(arg2);
menuAdapter.notifyDataSetInvalidated();
lv_home.setSelection(showTitle.get(arg2));
tv_title.setText(data[arg2]);
lv_home.setOnScrollListener(new OnScrollListener() {
private int scrollS
public void onScrollStateChanged(AbsListView view, int scrollState) {
// TODO Auto-generated method stub
//System.out.println("onScrollStateChanged" + "
scrollState" + scrollState);
this.scrollState = scrollS
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// TODO Auto-generated method stub
if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
Log.d("jiejie", "onScroll" + "
firstVisibleItem" + firstVisibleItem
visibleItemCount" + visibleItemCount + "
totalItemCount" + totalItemCount);
int current =showTitle.indexOf(firstVisibleItem );
System.out.println(current + "dd"
firstVisibleItem);
lv_home.setSelection(current);
if(currentItem != current && current &=0){
currentItem =
tv_title.setText(data[current]);
menuAdapter.setSelectItem(currentItem);
menuAdapter.notifyDataSetInvalidated();
左侧ListView的适配器代码
package com.item.jiejie.
import com.item.jiejie.R;
import android.content.C
import android.graphics.C
import android.view.V
import android.view.ViewG
import android.widget.BaseA
import android.widget.TextV
* 左侧菜单ListView的适配器
* @author Administrator
public class MenuAdapter extends BaseAdapter{
private int selectItem = 0;
private String data[] = {"热销榜","新品套餐","便当套餐","单点菜品","饮料类","水果罐头","米饭"};
public MenuAdapter(Context context) {
this.context =
public int getSelectItem() {
return selectI
public void setSelectItem(int selectItem) {
this.selectItem = selectI
public int getCount() {
// TODO Auto-generated method stub
return data.
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
public long getItemId(int arg0) {
// TODO Auto-generated method stub
public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ViewHolder holder = null;
if(arg1 == null) {
holder = new ViewHolder();
arg1 = View.inflate(context, R.layout.item_menu, null);
holder.tv_name = (TextView)arg1.findViewById(R.id.item_name);
arg1.setTag(holder);
holder = (ViewHolder)arg1.getTag();
if(arg0 == selectItem){
holder.tv_name.setBackgroundColor(Color.WHITE);
holder.tv_name.setTextColor(context.getResources().getColor(R.color.text_green));
holder.tv_name.setBackgroundColor(context.getResources().getColor(R.color.ll_coachback));
holder.tv_name.setTextColor(context.getResources().getColor(R.color.text_deep));
holder.tv_name.setText(data[arg0]);
return arg1;
static class ViewHolder{
private TextView tv_
右侧的适配器代码
package com.item.jiejie.
import java.util.L
import com.item.jiejie.R;
import com.item.jiejie.entity.FoodD
import android.content.C
import android.text.TextU
import android.view.V
import android.view.ViewG
import android.widget.BaseA
import android.widget.TextV
* 右侧主界面ListView的适配器
* @author Administrator
public class HomeAdapter extends BaseAdapter {
private List&FoodData& foodD
public HomeAdapter(Context context, List&FoodData& foodDatas) {
this.context =
this.foodDatas = foodD
public int getCount() {
// TODO Auto-generated method stub
if(foodDatas!=null){
return foodDatas.size();
return 10;
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return null;
public long getItemId(int arg0) {
// TODO Auto-generated method stub
public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
ViewHold holder = null;
if(arg1 == null){
arg1 = View.inflate(context, R.layout.item_home, null);
holder = new ViewHold();
holder.tv_title = (TextView)arg1.findViewById(R.id.item_home_title);
holder.tv_name = (TextView)arg1.findViewById(R.id.item_home_name);
arg1.setTag(holder);
holder = (ViewHold)arg1.getTag();
holder.tv_name.setText(foodDatas.get(arg0).getName());
holder.tv_title.setText(foodDatas.get(arg0).getTitle());
if(arg0 == 0){
holder.tv_title.setVisibility(View.VISIBLE);
}else if (!TextUtils.equals(foodDatas.get(arg0).getTitle(), foodDatas.get(arg0 -1).getTitle())) {
holder.tv_title.setVisibility(View.VISIBLE);
holder.tv_title.setVisibility(View.GONE);
return arg1;
private static class ViewHold{
private TextView tv_
private TextView tv_
阅读(...) 评论()