Subject: [UI] 时间条控件制作简明教程
admin
Administrator
Rank: 9Rank: 9Rank: 9



UID 1
Digest Posts 0
Credits 2856
Posts 52
Money 11
Reading Access 200
Registered 8-3-2007
Status Offline
Post at 13-3-2007 13:20  Profile | Blog | P.M. 
时间条控件制作简明教程

易智游戏中的时间条,格斗游戏中的血条,相信是大家在制作游戏当中经常遇到的元素. 现在用一简单的教程介绍如何用S60自定义控件完成它,该控件可以随意控制大小,控制时间长度.

      该控件将用到,窗口,如何制作自定义,时间周期类等知识.

      制作之前首先请大家看看 Nokia Forum 关于 自定义控件的原理和教程
      CPeriodic 的类的使用可以参考sdk中
    Developer Library >> API Reference >> C++ API reference >> Timers and Timing Services >> CPeriodic

1.类的定义:

class CMyTimerContainer : public CCoeControl
{
public:
   
    void ConstructL(TInt aSecond ,TPoint aPoint, TSize aSize);// aSecond 初始的秒数,TPoint 控件所在位置; TSize控件大小
    ~CMyTimerContainer();
    void Draw(const TRect& aRect) const;

    static TInt Start__(TAny* aObject);    //周期函数
    void Start_();//周期函数
private: //data

  CPeriodic* iPeriodic;
  TInt iLeft; //剩余的时间
  TInt iTotal;//总共的时间
  TPoint iPoint; //控件所在位置,
  TSize iSize; //控件的大小
}

2.周期函数:

TInt CMyTimerContainer::Start__(TAny* aObject)
{
  ((CMyTimerContainer*)aObject)->Start_(); // cast, and call non-static function
    return 1;
}

void CMyTimerContainer::Start_()
{
  iLeft--;
  if(iLeft==0)
  {
    DrawNow();
    iPeriodic->Cancel();
    return;
  }
  DrawNow();
}

3.绘图函数

void CMyTimerContainer::Draw(const TRect& aRect) const
    {
    CWindowGc& gc = SystemGc();

    /*画背景*************************/
    gc.SetBrushColor( KRgbBlack );
    gc.SetBrushStyle( CGraphicsContext::ESolidBrush );
    gc.DrawRect(aRect);

    /*画进度条*************************/
     gc.SetBrushStyle( CGraphicsContext::ESolidBrush );
     gc.SetBrushColor( KRgbRed );
     gc.SetPenStyle( CGraphicsContext::ENullPen );
     gc.DrawRect( TRect(TSize(iLeft*Size().iWidth/iTotal,iSize.iHeight)) );
    }

4.控件的构

void CMyTimerContainer::ConstructL(TInt aSecond ,TPoint aPoint, TSize aSize)
    {
    CreateWindowL();
    iTotal = aSecond;
    iLeft = iTotal;
    iPoint = aPoint;
    iSize = aSize;
    iPeriodic = CPeriodic::NewL(CActive::EPriorityIdle);
    iPeriodic->Start(0/*8000000*/, 1000000/*35714*/, TCallBack(Start__, this));
    SetExtent(aPoint,aSize);
    ActivateL();
    }

5.如何调用该控件

a,在XXXContainer.h中加入该控件
   private: //data
     CMyTimerContainer* iTimer;

b,在构造函数中构造其,秒数,位置,以及大小
void CXXXXContainer::ConstructL(const TRect& aRect)
    {
    CreateWindowL();

    iTimer =  new (ELeave) CMyTimerContainer;
    iTimer->ConstructL( 60/*init seconds*/,TPoint(0,100),TSize(176,15),this);

    SetRect(aRect);
    ActivateL();
    }

至此一个时间控件就做好了,大家可以按照以上的步骤做一下.
本文源代码下载地址: 下载>>
Top
admin
Administrator
Rank: 9Rank: 9Rank: 9



UID 1
Digest Posts 0
Credits 2856
Posts 52
Money 11
Reading Access 200
Registered 8-3-2007
Status Offline
Post at 13-3-2007 13:30  Profile | Blog | P.M. 
The timelnie in puzzle games, lifetime in fighting games, that is a very normol element.
The following article will tell you how to make a timeline control step by step in S60.

The keywords of artile: window, custom control, time, periodic.

Frist, you need reffer to tow articles
I.Symbian OS: Creating Custom Controls

II.Periodic timer active object.
Developer Library >> API Reference >> C++ API reference >> Timers and Timing Services >> CPeriodic

1. Class Declaration:

class CMyTimerContainer : public CCoeControl
{
public:
   
    void ConstructL(TInt aSecond ,TPoint aPoint, TSize aSize); // Initialize Seconds, Position, Size Of Timeline Control
    ~CMyTimerContainer();
    void Draw(const TRect& aRect) const;

    static TInt Start__(TAny* aObject);   
    void Start_();
private: //data

  CPeriodic* iPeriodic;
  TInt iLeft; //Left times
  TInt iTotal;//Total times
  TPoint iPoint; //control position,
  TSize iSize; //Control size
}

2. Periodic Functions:

TInt CMyTimerContainer::Start__(TAny* aObject)
{
  ((CMyTimerContainer*)aObject)->Start_(); // cast, and call non-static function
    return 1;
}

void CMyTimerContainer::Start_()
{
  iLeft--;
  if(iLeft==0)
  {
    DrawNow();
    iPeriodic->Cancel();
    return;
  }
  DrawNow();
}

3. Draw Funciton

void CMyTimerContainer::Draw(const TRect& aRect) const
    {
    CWindowGc& gc = SystemGc();

    /*Draw BackGround*************************/
    gc.SetBrushColor( KRgbBlack );
    gc.SetBrushStyle( CGraphicsContext::ESolidBrush );
    gc.DrawRect(aRect);

    /*Drar Timeline*************************/
     gc.SetBrushStyle( CGraphicsContext::ESolidBrush );
     gc.SetBrushColor( KRgbRed );
     gc.SetPenStyle( CGraphicsContext::ENullPen );
     gc.DrawRect( TRect(TSize(iLeft*Size().iWidth/iTotal,iSize.iHeight)) );
    }

4. Construct Function

void CMyTimerContainer::ConstructL(TInt aSecond ,TPoint aPoint, TSize aSize)
    {
    CreateWindowL();
    iTotal = aSecond;
    iLeft = iTotal;
    iPoint = aPoint;
    iSize = aSize;
    iPeriodic = CPeriodic::NewL(CActive::EPriorityIdle);
    iPeriodic->Start(0/*8000000*/, 1000000/*35714*/, TCallBack(Start__, this));
    SetExtent(aPoint,aSize);
    ActivateL();
    }

5. How To Use The Timeline Custom Control

a.Add Custom Control in XXXContainer.h
   private: //data
     CMyTimerContainer* iTimer;

b,Initialize Seconds, Position, Size Of Timeline Control
void CXXXXContainer::ConstructL(const TRect& aRect)
    {
    CreateWindowL();

    iTimer =  new (ELeave) CMyTimerContainer;
    iTimer->ConstructL( 60/*init seconds*/,TPoint(0,100),TSize(176,15),this);

    SetRect(aRect);
    ActivateL();
    }

You can reffer to the codes of article to modify your codes. Welcome to comment here.
Download Source Codes>>

原文地址
Top
54exsblp
Newbie
Rank: 1



UID 15947
Digest Posts 0
Credits 1
Posts 2
Money 13
Reading Access 10
Registered 27-5-2009
Status Offline
Post at 27-5-2009 12:44  Profile | Site | P.M.  | QQ
¥

Top
 


All times are GMT+8, the time now is 7-9-2010 03:09

CopyRight © Symbianx.cn 2007 Powered By Discuz! 5
Clear Cookies - Contact Us - Symbian OS系统[S60,UIQ]开发中文翻译论坛 - Archiver

本站原文版权归原文作者所有,本站译文版权归本站所有,如需转载请注明原文和译文出处,否则追究法律责任