[android开发之内容更新类APP]四、项目的基本功能之布局(续)

昨天才拿到电脑,不说了,都是泪

http://joveth.github.io/funny/

1.选项卡的滑动效果

要知道,用这个选项卡就是想让它滑动起来,不然的话,我才不喜欢用它呢。

在让他滑动之前,先来说一下上一张 的问题,话说,按照设计器下载下来的包,替换到 我们的 res之后,我发现,tabhost的选项颜色没有变,在我尝试 了各种方法之后,终于,我tm放弃了,好吧,正好 找到了这个滑动效果的demo,还有选项卡的颜色切换效果。

话不多说 ,改进我们的东西吧。

1.修改我们的 acitivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="@drawable/tab_widget_bg" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <!-- 隐藏 -->

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone" >

                <fragment
                    android:id="@+id/fragment_image"
                    android:name="com.jov.germany.frame.ImageFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <fragment
                    android:id="@+id/fragment_text"
                    android:name="com.jov.germany.frame.TextFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <fragment
                    android:id="@+id/fragment_both"
                    android:name="com.jov.germany.frame.BothFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

这里面添加了viewpage,还有把FramLayout隐藏了

其中的布局文件:

res/color/tab_widget_text.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- 标签页tab 文字切换颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="@color/color_orange"/>

    <item android:color="#000"/>

</selector>

value/color.xml中添加:

<color name="color_orange">#FF9224</color>

为啥是橘黄,我……如果你不喜欢,百度HTML颜色代码表,找一个你 自己的最爱

在来修改我们的 MainAcitivity.java

package com.jov.germany;

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

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabContentFactory;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
	public static final String PAGE1_ID = "page1";
	public static final String PAGE2_ID = "page2";
	public static final String PAGE3_ID = "page3";

	private TabHost tabHost; // TabHost
	private List<View> views; // ViewPager内的View对象集合
	private FragmentManager manager; // Activity管理器
	private ViewPager pager; // ViewPager

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

		// 初始化资源
		pager = (ViewPager) findViewById(R.id.viewpager);
		tabHost = (TabHost) findViewById(R.id.tab_host);
		manager = getSupportFragmentManager();
		views = new ArrayList<View>();

		views.add(manager.findFragmentById(R.id.fragment_image).getView());
		views.add(manager.findFragmentById(R.id.fragment_text).getView());
		views.add(manager.findFragmentById(R.id.fragment_both).getView());

		// 管理tabHost开始
		tabHost.setup();

		// 传一个空的内容给TabHost,不能用上面两个fragment
		TabContentFactory factory = new TabContentFactory() {
			@Override
			public View createTabContent(String tag) {
				return new View(MainActivity.this);
			}
		};
		// tab1
		TabSpec tabSpec = tabHost.newTabSpec(PAGE1_ID);
		tabSpec.setIndicator(createTabView(R.string.fragment_image_str));
		tabSpec.setContent(factory);
		tabHost.addTab(tabSpec);
		// tab2
		TabSpec tabSpec2 = tabHost.newTabSpec(PAGE2_ID);
		tabSpec2.setIndicator(createTabView(R.string.fragment_text_str));
		tabSpec2.setContent(factory);
		tabHost.addTab(tabSpec2);
		// tab3
		TabSpec tabSpec3 = tabHost.newTabSpec(PAGE3_ID);
		tabSpec3.setIndicator(createTabView(R.string.fragment_both_str));
		tabSpec3.setContent(factory);
		tabHost.addTab(tabSpec3);

		tabHost.setCurrentTab(0);
		// 管理tabHost结束

		// 设置监听器和适配器
		pager.setAdapter(new PageAdapter());
		pager.setOnPageChangeListener(new PageChangeListener());
		tabHost.setOnTabChangedListener(new TabChangeListener());
	}

	/**
	 * PageView Adapter
	 *
	 * @author Administrator
	 *
	 */
	private class PageAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup view, int position, Object arg2) {
			view.removeView(views.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			try {
				if (views.get(position).getParent() == null) {
					view.addView(views.get(position));
				} else {
					((ViewGroup) views.get(position).getParent())
							.removeView(views.get(position));
					view.addView(views.get(position));
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			return views.get(position);
		}
	}

	/**
	 * 标签页点击切换监听器
	 *
	 * @author Administrator
	 *
	 */
	private class TabChangeListener implements OnTabChangeListener {
		@Override
		public void onTabChanged(String tabId) {
			if (PAGE1_ID.equals(tabId)) {
				pager.setCurrentItem(0);
			} else if (PAGE2_ID.equals(tabId)) {
				pager.setCurrentItem(1);
			} else if (PAGE3_ID.equals(tabId)) {
				pager.setCurrentItem(2);
			}
		}
	}

	/**
	 * ViewPager滑动切换监听器
	 *
	 * @author Administrator
	 *
	 */
	private class PageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageSelected(int arg0) {
			tabHost.setCurrentTab(arg0);
		}
	}

	/**
	 * 创建tab View
	 *
	 * @param string
	 * @return
	 */
	private View createTabView(int stringId) {
		View tabView = getLayoutInflater().inflate(R.layout.tab, null);
		TextView textView = (TextView) tabView.findViewById(R.id.tab_text);
		textView.setText(stringId);
		return tabView;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

其中的layout/tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/state_tabs_bg" >

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_marginTop="11dp"
    	android:layout_gravity="center_horizontal"
    	android:textSize="18sp"
    	android:textColor="@color/tab_widget_text"/>

</LinearLayout>

drawable/state_tabs_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- tab每个标签背景 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/tabs_selected_bg" />

	<item android:drawable="@drawable/tabs_normal_bg"></item>

</selector>

drawable/tabs_selected_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="@color/color_orange" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape>
            <solid android:color="#eeeeee" />
        </shape>
    </item>

</layer-list>

drawable/tabs_normal_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
        <shape>
            <solid android:color="@color/color_orange" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#eeeeee" />
        </shape>
    </item>

</layer-list>

好至此的话 我们的代码算是ok了,但是当你运行的时候却发现跑不起来,为啥 呢???

且看一下我们的Frame里面,修改ImageFrame.java:

package com.jov.germany.frame;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.jov.germany.R;

public class ImageFrame extends Fragment{
	 @Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	            Bundle savedInstanceState) {
	        return inflater.inflate(R.layout.image_frame, container, false);
	    }
}

你可能会觉得没什么区别,看一下我们的Fragment引用的包,不一样哦。

好吧,最后MainAcitivity.java中的String内容自己 在string.xml里面自己加把

没有截滑动效果。最近各种忙,更新的 有点慢,没办法啊

源码这里

时间: 2024-08-24 23:30:29

[android开发之内容更新类APP]四、项目的基本功能之布局(续)的相关文章

[android开发之内容更新类APP]一、开始前的整体说明

1.博主的日常 话说很久没更新blog了,话说消失了好长一段时间了呢,话说...你妹的,能不能不要这么二. 好吧,话说...我操,最近在忙什么呢,其实也没什么,%¥¥%*)0--嗯,对,就是做了这么多的事情. 有一天我打开手机(你妹,天天不都在看手机吗),具体来说是打开了某个分类文件夹,发现里面自己以前的很多坑(其实是自己以前想做的app,不过都只建好了demo,没有做实际的开发),左右无事(鲁的累了),把其中的实现一下吧. 好,先明确一下我们要做的东西,什么东西?你要做什么东西,快tm的招出来

[android开发之内容更新类APP]三、项目的基本功能之布局

应用宝的下载地址:http://android.myapp.com/myapp/detail.htm?apkName=com.jov.laughter 其它的市场如木蚂蚁,安卓市场.搜狐也都有了 注:代码会在文章的最后提供 1.环境 各种android的环境文章已经有非常多了,事实上也不须要什么,官方有个eclipse和sdk集成的包,下载下来之后就能够执行了.当然.假设你说你翻不了墙.你能够跟我说一声-- 话不多说,咱就假定你已经有了环境 建好你的android  project 大家都知道,

[android开发之内容更新类APP]二、这几日的结果

android教程即将开始 话说这开了blog之后,就一直在试用自己的app,发现,TM的真的很不爽,不好用,好吧,本来打算放弃了,不过看到手机里还有另一个坑,干脆重新做一个吧. 原来的神回复APP地址http://app.sohu.com/app/info?app_id=24203  有兴趣的可以看看 现在的搞笑吧APP地址http://apk.91.com/Soft/Android/com.jov.laughter-1.html  之后的文章就拿这个APP作为说明,但是第一章的这些坑,咱就不

wemall app商城源码android开发MD5加密工具类

wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享android开发MD5加密工具类主要代码,供技术员参考学习. package com.gzcivil.utils; import java.io.UnsupportedEncodingException; import java.security.MessageDigest; import java.security.NoSuchAlgori

【视频】零基础学Android开发:蓝牙聊天室APP(四)

零基础学Android开发:蓝牙聊天室APP第四讲 4.1 ListView控件的使用 4.2 BaseAdapter详解 4.3 ListView分布与滚动事件 4.4 ListView事件监听器:OnItemClickedListener 在线收看:http://www.3g-edu.org/news/video026.htm 视频下载:http://pan.baidu.com/s/1jGkjDGE

Android自定义View——实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习,学会了绘制柱状图.绘制折线图.绘制进度控件,那我们今天就来聊聊另外一种自定义的View,这就是我们常见的七日年化收益折线图效果.先看看长什么样. 这就是效果图了,元素相对而言还是比较多的,这里有线.柱状图.文字.折线.点等等.看起来好像很复杂,但是呢,只要一步一步的实现,那还是可以达到这种效果的,之前我们说过的, 自定义View,就像是在photo shop里面画图,想要什么就画什么,我们可以有很多的画笔工具,也可以有很多的图层. 先看看我们这一次用到哪些变量. p

谷歌推出全新Android开发语言Sky:让App更流畅

土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 使用HTML 创建Mac OS App 视频教程. 官方QQ群: (1)App实践出真知 434558944 (2)App学习交流 452180823 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 谷歌推出全新Android开发语言Sky

【Android开发学习笔记】【第四课】基础控件的学习

通过一个简单的例子来学习下面几种控件: 1.TextView:简单的文本显示控件 2.EditText:可以编辑的文本框 3.Button:按钮 4.Menu:这里指的是系统的Menu 5.Toast:消息提示控件,类似于MFc的tip(不知道理解的对不对) 顺便用到上一次学习的多个Activity之间传递数据的技术,来做一个小的计算乘法的case 步骤: (1)主Activity 和显示结果的 Activity 都采用线性布局,下面是布局文件的源代码: <LinearLayout xmlns:

Android开发怎么让自己的APP UI漂亮、大方(规范篇一)

首先,笔者是站立在开发者的角度来看UI设计的,欢迎专业人士提供指导,不多说,来看怎么把UI设计和开发高效结合起来~ 一.约定APP开发中的一些规则 1.大部分图标满足HDPI(高清)即可,比如:大众点评首页的右上角图标,尺寸大致在48*48px左右 2.一般提供1280*720px的尺寸即可,最常见的适配模式 3.还有种图标,很多界面复用且图标中等偏大(80px及以上左右),他们在常规手机.平板,小尺寸手机上面需要适配,所以需要多种尺寸的图标,如:微信底部的tab菜单图标,一般设计的尺寸要3套,