AndroidPlayer

【HTML5】用3个步骤实现响应式网页设计

2011-12-31 13:35:17

写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。
文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

译自：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

转载请注明：来自蒋宇捷的博客（http://blog.csdn.net/hfahe）

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。

第一步：Meta标签（查看演示）

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。



第二步：HTML结构

在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。

第三步：媒介查询-Media Queries

CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示

类别：未分类|阅读(8)|回复(0)|赞(0)阅读全文>>

转载

android3D open GL-ES之光效开发

2011-10-31 13:20:43

本文转自：http://blog.csdn.net/hmg25/article/details/6739699
光效三要素

在 OpenGL ES中，光由三个元素组成，分别是环境元素（ambient component），散射元素（diffuse component）和高光元素（specular component）。我们使用颜色来设定光线元素，这看上去有些奇怪，但是由于它允许你同时指定各光线元素的颜色和相对强度，这个方法工作得很好。明亮的白色光定义为白色 ({1.0, 1.0, 1.0, 1.0})，而暗白色可能定义为灰色 ({0.3, 0.3, 0.3 1.0})。你还可以通过改变红，绿，蓝元素的百分比来调整色偏。 ..

类别：未分类|阅读(0)|回复(0)|赞(0)阅读全文>>

转载

apktool反编译工具使用详解

2011-10-09 10:03:51

APKTool是GOOGLE提供的APK编译工具，需要JAVA运行环境，推荐使用JDK1.6或者JDK1.7。
如果你想对APK文件进行修改，那么就不可避免的要使用到APKTool。论坛里有很多关于ROM美化的帖子都需要自己动手修改APK文件，比如修改framework-res.apk、systemUI.apk等等。
相信各位有不少人看了后都想亲自来修改一番，但是结果却是遇到了各式各样的错误却无法进行改正，甚至都不知道自己错在哪里。
一．APKTOOL使用环境配置
1.安装JAVA并设置环境变量。
下载安装都很简单，关键是安装完后还需要亲自设置环境变量以方便其他程序能够条用J..

类别：未分类|阅读(4891)|回复(1)|赞(1)阅读全文>>

转载

android实现桌面歌词效果的关键技术点

2011-10-08 13:00:58

天天动听，这款Android手机上的音乐播放器，相信不少朋友都曾用过。不知大家是否注意到，天天动听有一个迷你歌词的特效。
什么效果呢？就是不管你切到什么画面，歌词永远显示，并且可以拖动。类型QQ音乐，在电脑上播放时显示的歌词效果。

下面先来看一下效果。

这个歌词是在所有界面之上的。

下面我们将这个效果解剖一下，我认为主要有三个难点：

1. 歌词悬浮在所有页面之上

2. 歌词可以拖动位置

3. 歌词的播放效果 (颜色覆盖)

对于第一点，首先想到的就是 WindowManager ，这个类可能不少人都用过，一般用于获取屏幕宽度、高度，那么这次就要利用这个类来让我们的歌词永远置顶。

通过查看API，我们看到，在WindowManager.LayoutParams类中，有好几个属性可以设置View置顶。

引用

TYPE_SYSTEM_OVERLAYWindow type: system overlay windows, which need to be displayed on top of everything else.

TYPE_SYSTEM_ALERTWindow type: system window, such as low power alert.

TYPE_PHONEThese windows are normally placed above all applications, but behind the status bar.

下面我们来测试一下, 通过下面几句代码，就可以让一个View凌驾在所有View之上。

Java代码

WindowManager wm = (WindowManager)getApplicationContext().getSystemService(WINDOW_SERVICE);
WindowManager.LayoutParams params = new WindowManager.LayoutParams();
params.type = WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY;

params.width = WindowManager.LayoutParams.WRAP_CONTENT;
params.height = WindowManager.LayoutParams.WRAP_CONTENT;

TextView tv = new TextView(this);
wm.addView(tv, params);

这边需要注意的是， WindowManager也是通过 getSystemService 来获取，但必须先 getApplicationContext，否则就无效了。

      直接WindowManager wm = (WindowManager)getSystemService(WINDOW_SERVICE); 这样是无效的！！       还有一点就是，别忘了在Manifest.xml中添加权限：

Java代码

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

现在我们这样做，我们已经可以让歌词永远置顶了。但是不要得意，现在这样，结果是我们TextView在最顶层了，然后你就会发现，页面上什么操作都不能做了，在TextView下面的任何东西，你都点不了。

      为了解决这个，我们必须加上flags参数，让当前的View失去焦点，从而让后面的页面获得焦点。代码如下：

Java代码

类别：未分类|阅读(300)|回复(0)|赞(1)阅读全文>>

转载

android检查网络连接状态

2011-09-13 16:02:34

//检查网络连接状态，Monitor network connections (Wi-Vi, GPRS, UMTS, etc.)
public static boolean checkNetWorkStatus(Context context){
  boolean result;
  ConnectivityManage cm=(ConnectivityManager) context.getSystemService(Context.CONNECTIVITY_SERVICE);
  NetworkInfo netinfo = cm.getActiveNetworkInfo();
  if ( netinfo !=null && netinfo.isConnected() ) {
   result=true;
   Log.i(TAG, "The net was c..

类别：未分类|阅读(30)|回复(0)|赞(0)阅读全文>>

转载

Android移动应用界面的模板化设计【自定义..

2011-06-19 17:02:58

Android没有像苹果开发那样功能强大的界面开发工具，本身ADT插件提供的界面编辑能力有限，没办法刻画所有的界面情况；Android的界面xml代码可以进行人工修改，而Iphone的全部在图形界面上拖动完成，可没提供任何方式的代码级修改。Android的UI设计开发过程非常繁琐，容易出错，需要很长时间调节界面细节，开发过Android应用的人肯定深有同感。用几年前的网页设计来打个比方，开发Iphone的软件界面就好比是用Frontpage弄点控件拖成一张页面，而开发Android更接近于闭着眼睛在Notepad里一行行的写html标签。为了使开发Android应用..

类别：未分类|阅读(685)|回复(0)|赞(1)阅读全文>>

转载

关于Android中的Parcel机制

2011-06-09 10:22:37

一．先从Serialize说起

我们都知道JAVA中的Serialize机制，译成串行化、序列化……，其作用是能将数据对象存入字节流当中，在需要时重新生成对象。主要应用是利用外部存储设备保存对象状态，以及通过网络传输对象等。

二．Android中的新的序列化机制
在Android系统中，定位为针对内存受限的设备，因此对性能要求更高，另外系统中采用了新的IPC（进程间通信）机制，必然要求使用性能更出色的对..

类别：未分类|阅读(829)|回复(0)|赞(1)阅读全文>>

转载

Android异步加载图像小结

2011-05-11 09:42:22

研究了android从网络上异步加载图像，现总结如下：
（1）由于android UI更新支持单一线程原则，所以从网络上取数据并更新到界面上，为了不阻塞主线程首先可能会想到以下方法。
     在主线程中new 一个Handler对象，加载图像方法如下所示
    private void loadImage(final String url, final int id) {

        handler.post(new Runnable() {

              &nbs..

类别：未分类|阅读(129)|回复(0)|赞(2)阅读全文>>

转载

【android】sqlite+content provider+curs..

2011-04-28 10:07:24

如果使用Sqlite，建议和ContentProvider结合使用。这样数据库的生命周期就不用自己管了。然后，如果要在比如ListView中显示，可以使用CursorAdapter。简化的办法是使用子类SimpleCursorAdapter。
以下就介绍一下使用sqlite+content provider+cursor adapter的最简单实现示例。太简单了，示例如图：

首先，要有个Content provider，如不了解如何实现，请参考编写最简单的Content Provider

public class RiverContentProvider extends ContentProvider { public static final Uri CONTENT_URI = Uri .parse("content://com.easymorse.cp.rivers"); public static final String _ID = "_id"; public static final String NAME = "name"; public static final String LENGTH = "length"; private static SQLiteDatabase database; private static final int DATABASE_VERSION = 2; private static final List<River> RIVERS = new ArrayList<River>(); static { River river = new River("长江", 6380); RIVERS.add(river); river = new River("黄河", 5464); RIVERS.add(river); } @Override public int delete(Uri uri, String selection, String[] selectionArgs) { // TODO Auto-generated method stub return 0; } @Override public String getType(Uri uri) { // TODO Auto-generated method stub return null; } @Override public Uri insert(Uri uri, ContentValues contentValues) { // TODO Auto-generated method stub return null; } @Override public boolean onCreate() { database = new RiverDatabaseHelper(getContext(), "rivers", null, DATABASE_VERSION).getReadableDatabase(); return database != null; } @Override public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) { return database.query("rivers", projection, selection, selectionArgs, null, null, sortOrder); } @Override public int update(Uri uri, ContentValues values, String selection, String[] selectionArgs) { // TODO Auto-generated method stub return 0; } private static class RiverDatabaseHelper extends SQLiteOpenHelper { public RiverDatabaseHelper(Context context, String name, CursorFactory factory, int version) { super(context, name, factory, version); } @Override public void onCreate(SQLiteDatabase database) { database.execSQL("create table if not exists rivers(" + " _id integer primary key autoincrement," + " name text," + "length integer" + ");"); SQLiteStatement statement = database .compileStatement("insert into rivers(name,length) values(?,?)"); for (River r : RIVERS) { int index = 1; statement.bindString(index++, r.getName()); statement.bindLong(index++, r.getLength()); statement.executeInsert(); } statement.close(); } @Override public void onUpgrade(SQLiteDatabase database, int oldVersion, int newVersion) { database.execSQL("drop table if exists rivers"); onCreate(database); } } 这里写的很简略，没用到的方法都没实现。在总的布局中使用了ListView： <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/riverList" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> 使用了自定义的ListView布局，见： <?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="wrap_content"> <TextView android:id="@+id/riverName" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> 最后是在Activity中使用contentprovider查询的cursor，生成ListView： public class ListViewActivity extends Activity { private ListView riverListView; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); setRiverListViewAdapter(); } private void setRiverListViewAdapter() { riverListView = (ListView) this.findViewById(R.id.riverList); Cursor cursor = managedQuery(RiverContentProvider.CONTENT_URI, null, null, null, null); CursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.row, cursor, new String[] { RiverContentProvider.NAME }, new int[] { R.id.riverName }); riverListView.setAdapter(adapter); } }

[/img]..

类别：未分类|阅读(1301)|回复(0)|赞(0)阅读全文>>

转载

【android】用camera实现view的伪3D的效果

2011-04-26 09:02:19

使用Camera实现3D变换效果

最后来简单介绍下android提供的android.graphics.Camera类，通过该类可以在2D条件下实现3D动画效果，该类可以看做一个视图显示的3D空间，然后可以在里面做各种操作。把上面的ViewAnimation修改为如下实现可以具体看看Camera的功能：

class ViewAnimation extends Animation {
       int mCenterX;//记录View的中间坐标
     &n..

类别：未分类|阅读(1496)|回复(0)|赞(0)阅读全文>>

zy95804667 的BLOG

订阅我的博客

热门文章

最新评论

我最近发表的评论

最近访客

我的技术圈(2)

博客统计信息

文章